@arbidocs/blocks 0.4.95 → 0.4.97

package/dist/{chunk-E2AAIMXO.cjs → chunk-HGJGALLN.cjs}

@@ -7,14 +7,14 @@ var fflate = require('fflate');
 var store = require('@docx-editor.dev/core/store');
 var React3 = require('react');
 var react = require('@docx-editor.dev/react');
+var ui = require('@arbidocs/react/ui');
+var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 var reactDom = require('react-dom');
-var ui = require('@arbidocs/react/ui');
 var server = require('react-dom/server');
 var Y = require('yjs');
 var coedit = require('@arbidocs/coedit');
 var hocuspocus = require('@arbidocs/coedit/hocuspocus');
-var lucideReact = require('lucide-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -161,7 +161,25 @@ var ReviewItemContext = React3.createContext(null);
 function useReviewItem() {
   return React3.useContext(ReviewItemContext);
 }
+
+// src/docx/review/commentText.ts
+var SKIP = /* @__PURE__ */ new Set(["delText", "instrText", "delInstrText", "pPr", "rPr"]);
+function inline(node) {
+  if (node.kind === "textValue") return node.value ?? "";
+  if (node.localName && SKIP.has(node.localName)) return "";
+  if (node.localName === "br" || node.localName === "cr") return "\n";
+  if (node.localName === "tab") return "	";
+  return (node.children ?? []).map(inline).join("");
+}
+function commentText(entry) {
+  if (entry.kind !== "comment") return entry.text;
+  const blocks = entry.item?.comment?.blocks ?? [];
+  const text = blocks.map(inline).join("\n").trim();
+  return text || entry.text;
+}
 var CARD_GAP = 8;
+var CLUSTER_GAP = 24;
+var REVIEW_MARGIN_MIN_WIDTH = 900;
 var REVISION_LABELS = {
   insert: "Inserted",
   delete: "Deleted",
@@ -177,33 +195,102 @@ function isTopLevel(entry) {
   if (entry.kind === "custom") return entry.item.carded;
   return true;
 }
-function formatDate(value) {
-  if (!value) return "";
+function kindLabel(entry) {
+  if (entry.kind === "revision") return REVISION_LABELS[entry.revisionKind] ?? "Change";
+  if (entry.kind === "comment") return entry.resolved ? "Resolved" : "Comment";
+  return "Note";
+}
+function parseDate(value) {
+  if (!value) return null;
   const date = new Date(value);
-  return Number.isNaN(date.getTime()) ? "" : date.toLocaleString();
+  return Number.isNaN(date.getTime()) ? null : date;
+}
+function relativeDate(date) {
+  const seconds = (Date.now() - date.getTime()) / 1e3;
+  if (seconds < 45) return "just now";
+  if (seconds < 45 * 60) return `${Math.round(seconds / 60)}m ago`;
+  if (seconds < 22 * 3600) return `${Math.round(seconds / 3600)}h ago`;
+  if (seconds < 7 * 86400) return `${Math.round(seconds / 86400)}d ago`;
+  const sameYear = date.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear();
+  return date.toLocaleDateString(void 0, {
+    day: "numeric",
+    month: "short",
+    year: sameYear ? void 0 : "numeric"
+  });
+}
+function authorHue(author) {
+  let hash = 0;
+  for (const char of author) hash = hash * 31 + char.charCodeAt(0) | 0;
+  return Math.abs(hash) % 360;
 }
 function Avatar({ entry }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-review-avatar", "aria-hidden": "true", children: entry.initials });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "native-docx-review-avatar",
+      "aria-hidden": "true",
+      style: { "--review-author-hue": authorHue(entry.author || "") },
+      children: entry.initials
+    }
+  );
 }
-function Message({ entry }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-message", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-byline", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Avatar, { entry }),
+function Byline({ entry, children }) {
+  const date = parseDate(entry.date);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-byline", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { entry }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-who", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-review-author", children: entry.author || "Reviewer" }),
-      /* @__PURE__ */ jsxRuntime.jsx("time", { className: "native-docx-review-date", children: formatDate(entry.date) })
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "native-docx-review-meta", children: [
+        kindLabel(entry),
+        date && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          " \xB7 ",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "time",
+            {
+              className: "native-docx-review-date",
+              dateTime: date.toISOString(),
+              title: date.toLocaleString(),
+              children: relativeDate(date)
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    children
+  ] });
+}
+function ChangeText({ entry }) {
+  const removed = entry.revisionKind === "replace" ? entry.replacedText : void 0;
+  const struck = entry.revisionKind === "delete" || entry.revisionKind === "moveFrom";
+  const added = entry.revisionKind === "insert" || entry.revisionKind === "moveTo" || removed !== void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "native-docx-review-change", "data-testid": "review-text", children: [
+    removed && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("del", { children: removed }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-review-arrow", "aria-hidden": "true", children: "\u2192" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "native-docx-review-text", "data-testid": "review-text", children: entry.text })
+    struck ? /* @__PURE__ */ jsxRuntime.jsx("del", { children: entry.text }) : added ? /* @__PURE__ */ jsxRuntime.jsx("ins", { children: entry.text }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: entry.text })
+  ] });
+}
+function CommentText({ text, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "native-docx-review-text", "data-testid": testId, children: /* @__PURE__ */ jsxRuntime.jsx(ui.AiMarkdown, { className: "native-docx-review-markdown", allowHtml: false, children: text }) });
+}
+function Reply({ entry }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-message", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Byline, { entry }),
+    /* @__PURE__ */ jsxRuntime.jsx(CommentText, { text: commentText(entry) })
   ] });
 }
 function ReplyForm({
   entry,
-  review
+  review,
+  onDismiss
 }) {
   const [text, setText] = React3.useState("");
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "form",
     {
       className: "native-docx-review-reply",
+      onClick: (event) => event.stopPropagation(),
       onSubmit: (event) => {
         event.preventDefault();
         const value = text.trim();
@@ -215,25 +302,39 @@ function ReplyForm({
           {
             "data-testid": "review-reply-input",
             "aria-label": "Reply",
-            placeholder: "Reply",
+            placeholder: "Reply\u2026",
             value: text,
             onChange: (event) => setText(event.target.value),
             onKeyDown: (event) => {
               if (event.key === "Escape") {
+                event.preventDefault();
                 event.stopPropagation();
-                review.setActive(null);
+                onDismiss();
               }
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: !text.trim(), children: "Reply" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            className: "native-docx-review-icon native-docx-review-send",
+            "aria-label": "Reply",
+            title: "Reply",
+            disabled: !text.trim(),
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SendHorizontal, { size: 14 })
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
+            className: "native-docx-review-icon",
             "data-testid": "review-reply-cancel",
-            onClick: () => review.setActive(null),
-            children: "Cancel"
+            "aria-label": "Cancel",
+            title: "Cancel",
+            onClick: onDismiss,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 })
           }
         )
       ]
@@ -246,7 +347,8 @@ function Card({
   review,
   extra,
   cardRef,
-  top
+  top,
+  onDismiss
 }) {
   const resolved = entry.kind === "comment" && entry.resolved;
   return /* @__PURE__ */ jsxRuntime.jsx(ReviewItemContext.Provider, { value: entry, children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -265,60 +367,85 @@ function Card({
       },
       "data-testid": "review-card",
       "data-kind": entry.kind,
+      "data-change": entry.kind === "revision" ? entry.revisionKind : void 0,
       "data-active": entry.isActive || void 0,
       "data-resolved": resolved || void 0,
-      style: { top },
+      "data-floating": top === void 0 || void 0,
+      style: top === void 0 ? void 0 : { top },
       onClick: () => {
         if (entry.activatable && !entry.isActive) review.setActive(entry.key);
       },
       children: [
-        entry.kind === "revision" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "native-docx-review-kind", children: REVISION_LABELS[entry.revisionKind] ?? "Change" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Message, { entry }),
-        replies.map((reply) => /* @__PURE__ */ jsxRuntime.jsx(Message, { entry: reply }, reply.key)),
+        /* @__PURE__ */ jsxRuntime.jsx(Byline, { entry, children: entry.kind === "comment" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-tools", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "native-docx-review-icon",
+              "data-testid": "review-resolve",
+              "aria-label": entry.resolved ? "Reopen" : "Resolve",
+              title: entry.resolved ? "Reopen" : "Resolve",
+              onClick: (event) => {
+                event.stopPropagation();
+                review.resolve(entry, !entry.resolved);
+              },
+              children: entry.resolved ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RotateCcw, { size: 14 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "native-docx-review-icon",
+              "data-testid": "review-delete",
+              "aria-label": "Delete",
+              title: "Delete",
+              onClick: (event) => {
+                event.stopPropagation();
+                review.remove(entry);
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: 14 })
+            }
+          )
+        ] }) }),
+        entry.kind === "revision" ? /* @__PURE__ */ jsxRuntime.jsx(ChangeText, { entry }) : /* @__PURE__ */ jsxRuntime.jsx(CommentText, { text: commentText(entry), testId: "review-text" }),
+        replies.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "native-docx-review-thread", children: replies.map((reply) => /* @__PURE__ */ jsxRuntime.jsx(Reply, { entry: reply }, reply.key)) }),
         extra,
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-actions", children: [
-          entry.kind === "revision" && !entry.readOnly && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                "data-testid": "review-accept",
-                onClick: () => review.accept(entry),
-                children: "Accept"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                "data-testid": "review-reject",
-                onClick: () => review.reject(entry),
-                children: "Reject"
-              }
-            )
-          ] }),
-          entry.kind === "comment" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                "data-testid": "review-resolve",
-                onClick: () => review.resolve(entry, !entry.resolved),
-                children: entry.resolved ? "Reopen" : "Resolve"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                "data-testid": "review-delete",
-                onClick: () => review.remove(entry),
-                children: "Delete"
-              }
-            )
-          ] })
+        entry.kind === "revision" && !entry.readOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-decide", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "native-docx-review-accept",
+              "data-testid": "review-accept",
+              onClick: (event) => {
+                event.stopPropagation();
+                review.accept(entry);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 14 }),
+                "Accept"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              type: "button",
+              className: "native-docx-review-reject",
+              "data-testid": "review-reject",
+              onClick: (event) => {
+                event.stopPropagation();
+                review.reject(entry);
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 }),
+                "Reject"
+              ]
+            }
+          )
         ] }),
-        entry.isActive && entry.kind !== "custom" && /* @__PURE__ */ jsxRuntime.jsx(ReplyForm, { entry, review })
+        entry.isActive && entry.kind !== "custom" && /* @__PURE__ */ jsxRuntime.jsx(ReplyForm, { entry, review, onDismiss })
       ]
     }
   ) });
@@ -338,7 +465,8 @@ function Draft({
       ref: formRef,
       className: "native-docx-review-card native-docx-review-draft",
       "data-testid": "review-draft",
-      style: { top },
+      "data-floating": top === void 0 || void 0,
+      style: top === void 0 ? void 0 : { top },
       onSubmit: (event) => {
         event.preventDefault();
         if (text.trim()) onSubmit(text.trim());
@@ -350,22 +478,53 @@ function Draft({
             ref: input,
             "data-testid": "review-draft-input",
             "aria-label": "Comment",
-            placeholder: "Add a comment",
+            placeholder: "Add a comment\u2026",
             value: text,
             onChange: (event) => setText(event.target.value),
             onKeyDown: (event) => {
-              if (event.key === "Escape") onCancel();
+              if (event.key === "Escape") {
+                event.preventDefault();
+                event.stopPropagation();
+                onCancel();
+              }
             }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-actions", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", disabled: !text.trim(), children: "Comment" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-testid": "review-draft-cancel", onClick: onCancel, children: "Cancel" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-decide", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "submit", className: "native-docx-review-accept", disabled: !text.trim(), children: "Comment" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: "native-docx-review-plain",
+              "data-testid": "review-draft-cancel",
+              onClick: onCancel,
+              children: "Cancel"
+            }
+          )
         ] })
       ]
     }
   );
 }
+function useScrollArea(anchor, ready) {
+  const [area, setArea] = React3.useState({
+    element: null,
+    width: 0
+  });
+  React3.useLayoutEffect(() => {
+    const element = anchor.current?.closest(".docx-editor__scroll-container") ?? null;
+    const measure = () => setArea(
+      (previous) => previous.element === element && previous.width === (element?.clientWidth ?? 0) ? previous : { element, width: element?.clientWidth ?? 0 }
+    );
+    measure();
+    if (!element || typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [anchor, ready]);
+  return area;
+}
 function DocxEditorReviewRail({
   children
 }) {
@@ -376,6 +535,10 @@ function DocxEditorReviewRail({
   const [tops, setTops] = React3.useState({});
   const [showResolved, setShowResolved] = React3.useState(true);
   const elements = React3.useRef(/* @__PURE__ */ new Map());
+  const anchor = React3.useRef(null);
+  const toolbar = React3.useRef(null);
+  const area = useScrollArea(anchor, review.ready);
+  const layout = area.width === 0 || area.width >= REVIEW_MARGIN_MIN_WIDTH ? "margin" : "compact";
   const openDraft = React3.useCallback(() => {
     const placement = editor?.getSelectionPlacement();
     if (!placement) return;
@@ -384,9 +547,22 @@ function DocxEditorReviewRail({
   }, [editor, review.setPaneOpen]);
   React3.useEffect(() => registry?.register(), [registry]);
   React3.useEffect(() => registry?.registerCommentDraft(openDraft), [registry, openDraft]);
+  const shownLayout = React3.useRef(null);
+  React3.useEffect(() => {
+    if (!review.ready || area.width === 0 || shownLayout.current === layout) return;
+    editor?.setReviewPaneOptions({ opening: layout === "margin" ? "auto" : "manual" });
+    const deepLinked = shownLayout.current === null && review.activeKey !== null;
+    shownLayout.current = layout;
+    if (layout === "margin") review.setPaneOpen(true);
+    else if (!deepLinked) {
+      setDraft(null);
+      review.setPaneOpen(false);
+    }
+  }, [editor, layout, area.width, review.ready, review.setPaneOpen]);
   const scale = editor?.getRenderScale() ?? 1;
   const top = review.items.filter(isTopLevel).filter((entry) => entry.anchorY !== null).filter((entry) => showResolved || entry.kind !== "comment" || !entry.resolved);
-  const hasChanges = review.items.some((entry) => entry.kind === "revision");
+  const changes = review.items.filter((entry) => entry.kind === "revision").length;
+  const comments = top.filter((entry) => entry.kind === "comment").length;
   const hasResolved = review.items.some((entry) => entry.kind === "comment" && entry.resolved);
   const repliesOf = React3.useCallback(
     (entry) => review.items.filter(
@@ -394,10 +570,49 @@ function DocxEditorReviewRail({
     ),
     [review.items]
   );
+  const column = layout === "margin" && review.paneOpen && (top.length > 0 || draft !== null);
+  const bubbleOpen = layout === "compact" && (review.paneOpen || draft !== null);
+  React3.useEffect(() => {
+    const element = area.element;
+    if (!element) return;
+    if (column) element.setAttribute("data-review-margin", "");
+    else element.removeAttribute("data-review-margin");
+    return () => element.removeAttribute("data-review-margin");
+  }, [area.element, column]);
+  const dismiss = React3.useCallback(() => {
+    setDraft(null);
+    if (layout === "compact") review.setPaneOpen(false);
+    else review.setActive(null);
+  }, [layout, review.setPaneOpen, review.setActive]);
+  React3.useEffect(() => {
+    const element = area.element;
+    if (!element || !bubbleOpen) return;
+    const close = (event) => {
+      const target = event.target;
+      if (target instanceof Element && target.closest(
+        ".native-docx-review-bubble, .native-docx-review-marker, .native-docx-review-add"
+      ))
+        return;
+      dismiss();
+    };
+    const escape = (event) => {
+      if (event.key !== "Escape" || event.defaultPrevented) return;
+      if (!(event.target instanceof Node) || !element.contains(event.target)) return;
+      event.preventDefault();
+      dismiss();
+    };
+    const document2 = element.ownerDocument;
+    element.addEventListener("pointerdown", close);
+    document2.addEventListener("keydown", escape);
+    return () => {
+      element.removeEventListener("pointerdown", close);
+      document2.removeEventListener("keydown", escape);
+    };
+  }, [area.element, bubbleOpen, dismiss]);
   React3.useLayoutEffect(() => {
-    if (!review.paneOpen) return;
+    if (!column) return;
     const next = {};
-    let floor = 0;
+    let floor = (toolbar.current?.offsetHeight ?? 0) + CARD_GAP;
     const rows = top.map((entry) => ({
       key: entry.key,
       y: (entry.anchorY ?? 0) * scale
@@ -415,7 +630,7 @@ function DocxEditorReviewRail({
       return same ? previous : next;
     });
   });
-  if (!review.ready) return null;
+  if (!review.ready) return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: anchor, className: "native-docx-review" });
   const selection = editor?.getSelectionPlacement();
   const addComment = selection && /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -424,108 +639,254 @@ function DocxEditorReviewRail({
       className: "native-docx-review-add",
       "data-testid": "review-add-comment",
       "aria-label": "Add comment",
+      title: "Add comment",
       style: { top: selection.anchorY * scale },
       onMouseDown: (event) => event.preventDefault(),
       onClick: openDraft,
-      children: "+"
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquarePlus, { size: 14 })
     }
   );
-  if (!review.paneOpen) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-markers", "data-testid": "review-markers", children: [
+  if (column) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: anchor, className: "native-docx-review", children: /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "native-docx-review-pane", "data-testid": "review-pane", "aria-label": "Review", children: [
       addComment,
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: toolbar, className: "native-docx-review-toolbar", "data-testid": "review-toolbar", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-review-summary", children: [
+          changes && `${changes} ${changes === 1 ? "change" : "changes"}`,
+          comments && `${comments} ${comments === 1 ? "comment" : "comments"}`
+        ].filter(Boolean).join(" \xB7 ") || "Review" }),
+        hasResolved && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "native-docx-review-switch", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              "data-testid": "review-show-resolved",
+              checked: showResolved,
+              onChange: (event) => setShowResolved(event.target.checked)
+            }
+          ),
+          "Resolved"
+        ] }),
+        changes > 0 && /* @__PURE__ */ jsxRuntime.jsx(BulkActions, { review, navigate: true })
+      ] }),
+      draft && /* @__PURE__ */ jsxRuntime.jsx(
+        Draft,
+        {
+          top: tops.__draft ?? draft.anchorY * scale,
+          formRef: (element) => {
+            if (element) elements.current.set("__draft", element);
+          },
+          onCancel: () => setDraft(null),
+          onSubmit: (text) => {
+            if (review.addComment(text)) setDraft(null);
+          }
+        }
+      ),
       top.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+        Card,
+        {
+          entry,
+          replies: repliesOf(entry),
+          review,
+          extra: children?.(entry),
+          top: tops[entry.key] ?? (entry.anchorY ?? 0) * scale,
+          onDismiss: dismiss,
+          cardRef: (element) => {
+            if (element) elements.current.set(entry.key, element);
+            else elements.current.delete(entry.key);
+          }
+        },
+        entry.key
+      ))
+    ] }) });
+  }
+  const clusters = [];
+  for (const entry of [...top].sort((a, b) => (a.anchorY ?? 0) - (b.anchorY ?? 0))) {
+    const y = (entry.anchorY ?? 0) * scale;
+    const last = clusters[clusters.length - 1];
+    if (last && y - last.y < CLUSTER_GAP) last.entries.push(entry);
+    else clusters.push({ y, entries: [entry] });
+  }
+  const shown = bubbleOpen ? draft ? null : clusters.find((cluster) => cluster.entries.some((entry) => entry.isActive)) ?? clusters[0] : void 0;
+  const focus = shown?.entries.find((entry) => entry.isActive) ?? shown?.entries[0];
+  const position = focus ? top.indexOf(focus) : -1;
+  const step = (offset) => {
+    const next = top[position + offset];
+    if (next) review.setActive(next.key);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: anchor, className: "native-docx-review", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-markers", "data-testid": "review-markers", children: [
+    addComment,
+    clusters.map((cluster) => {
+      const [first] = cluster.entries;
+      const comment = cluster.entries.some((entry) => entry.kind === "comment");
+      return /* @__PURE__ */ jsxRuntime.jsxs(
         "button",
         {
           type: "button",
           className: "native-docx-review-marker",
           "data-testid": "review-marker",
-          "data-kind": entry.kind,
-          "aria-label": `${entry.author}: ${entry.text.slice(0, 60)}`,
-          style: { top: (entry.anchorY ?? 0) * scale },
+          "data-kind": comment ? "comment" : first.kind,
+          "data-active": cluster === shown || void 0,
+          "aria-label": cluster.entries.length === 1 ? `${first.author}: ${first.text.slice(0, 60)}` : `${cluster.entries.length} comments and changes`,
+          "aria-expanded": layout === "compact" ? cluster === shown : void 0,
+          style: { top: cluster.y },
           onClick: () => {
+            if (layout === "compact" && cluster === shown) return dismiss();
+            setDraft(null);
             review.setPaneOpen(true);
-            review.setActive(entry.key);
-          }
+            review.setActive(first.key);
+          },
+          children: [
+            comment ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquare, { size: 13 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PencilLine, { size: 13 }),
+            cluster.entries.length > 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-review-count", children: cluster.entries.length })
+          ]
         },
-        entry.key
-      ))
-    ] });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "native-docx-review-pane", "data-testid": "review-pane", "aria-label": "Review", children: [
-    addComment,
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-toolbar", "data-testid": "review-toolbar", children: [
-      hasChanges && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "data-testid": "review-previous",
-            onClick: () => review.navigate("previous"),
-            children: "Previous change"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-testid": "review-next", onClick: () => review.navigate("next"), children: "Next change" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "data-testid": "review-accept-all",
-            onClick: () => review.resolveAll("accept"),
-            children: "Accept all"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            type: "button",
-            "data-testid": "review-reject-all",
-            onClick: () => review.resolveAll("reject"),
-            children: "Reject all"
+        first.key
+      );
+    }),
+    bubbleOpen && (draft || shown || top.length === 0) && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "native-docx-review-bubble",
+        "data-testid": "review-bubble",
+        role: "dialog",
+        "data-state": "open",
+        "aria-label": "Review",
+        style: {
+          top: draft ? draft.anchorY * scale : shown?.y ?? 0,
+          width: Math.max(220, Math.min(340, area.width - 56))
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            event.stopPropagation();
+            dismiss();
           }
-        )
-      ] }),
-      hasResolved && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
+        },
+        children: draft ? /* @__PURE__ */ jsxRuntime.jsx(
+          Draft,
           {
-            type: "checkbox",
-            "data-testid": "review-show-resolved",
-            checked: showResolved,
-            onChange: (event) => setShowResolved(event.target.checked)
+            onCancel: dismiss,
+            onSubmit: (text) => {
+              if (review.addComment(text)) setDraft(null);
+            }
           }
-        ),
-        "Show resolved"
-      ] })
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-bubble-head", children: [
+            top.length > 1 && position >= 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "native-docx-review-icon",
+                  "data-testid": "review-bubble-previous",
+                  "aria-label": "Previous",
+                  disabled: position === 0,
+                  onClick: () => step(-1),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "native-docx-review-summary", children: [
+                position + 1,
+                " of ",
+                top.length
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "native-docx-review-icon",
+                  "data-testid": "review-bubble-next",
+                  "aria-label": "Next",
+                  disabled: position === top.length - 1,
+                  onClick: () => step(1),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { size: 14 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                className: "native-docx-review-icon native-docx-review-close",
+                "data-testid": "review-bubble-close",
+                "aria-label": "Close",
+                onClick: dismiss,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 })
+              }
+            )
+          ] }),
+          shown?.entries.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
+            Card,
+            {
+              entry,
+              replies: repliesOf(entry),
+              review,
+              extra: children?.(entry),
+              onDismiss: dismiss
+            },
+            entry.key
+          )),
+          !shown && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "native-docx-review-empty", "data-testid": "review-empty", children: "No comments or changes." }),
+          changes > 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "native-docx-review-bubble-foot", children: /* @__PURE__ */ jsxRuntime.jsx(BulkActions, { review }) })
+        ] })
+      }
+    )
+  ] }) });
+}
+function BulkActions({ review, navigate }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-review-bulk", children: [
+    navigate && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "native-docx-review-segment", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "native-docx-review-icon",
+          "data-testid": "review-previous",
+          "aria-label": "Previous change",
+          title: "Previous change",
+          onClick: () => review.navigate("previous"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUp, { size: 14 })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "native-docx-review-icon",
+          "data-testid": "review-next",
+          "aria-label": "Next change",
+          title: "Next change",
+          onClick: () => review.navigate("next"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14 })
+        }
+      )
     ] }),
-    draft && /* @__PURE__ */ jsxRuntime.jsx(
-      Draft,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        top: tops.__draft ?? draft.anchorY * scale,
-        formRef: (element) => {
-          if (element) elements.current.set("__draft", element);
-        },
-        onCancel: () => setDraft(null),
-        onSubmit: (text) => {
-          if (review.addComment(text)) setDraft(null);
-        }
+        type: "button",
+        className: "native-docx-review-accept",
+        "data-testid": "review-accept-all",
+        onClick: () => review.resolveAll("accept"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CheckCheck, { size: 14 }),
+          "Accept all"
+        ]
       }
     ),
-    top.map((entry) => /* @__PURE__ */ jsxRuntime.jsx(
-      Card,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
       {
-        entry,
-        replies: repliesOf(entry),
-        review,
-        extra: children?.(entry),
-        top: tops[entry.key] ?? (entry.anchorY ?? 0) * scale,
-        cardRef: (element) => {
-          if (element) elements.current.set(entry.key, element);
-          else elements.current.delete(entry.key);
-        }
-      },
-      entry.key
-    )),
-    top.length === 0 && !draft && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "native-docx-review-empty", "data-testid": "review-empty", children: "No comments or changes." })
+        type: "button",
+        className: "native-docx-review-reject",
+        "data-testid": "review-reject-all",
+        onClick: () => review.resolveAll("reject"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 14 }),
+          "Reject all"
+        ]
+      }
+    )
   ] });
 }
 function ReviewCardSlot({ children }) {
@@ -607,14 +968,7 @@ function DocxCommentActivity() {
           /* @__PURE__ */ jsxRuntime.jsx(ui.DialogHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.DialogTitle, { children: "Document comment" }) }),
           thread.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 border-b pb-4 last:border-0", children: [
             /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: entry.author || "Reviewer" }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "p",
-              {
-                className: "whitespace-pre-wrap break-words text-sm",
-                "data-testid": "docx-full-comment-text",
-                children: entry.text
-              }
-            )
+            /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "docx-full-comment-text", children: /* @__PURE__ */ jsxRuntime.jsx(ui.AiMarkdown, { allowHtml: false, children: commentText(entry) }) })
           ] }, entry.key)),
           statuses.map(([id, run]) => /* @__PURE__ */ jsxRuntime.jsxs("p", { role: "status", className: "text-sm", children: [
             run.label,
@@ -1880,57 +2234,12 @@ var WordDraftStream = class {
     }
   }
 };
-function contentPath(documentId) {
-  const match = /^(doc-[A-Za-z0-9]+)@v([1-9][0-9]*)$/.exec(documentId);
-  return match ? `/${encodeURIComponent(match[1])}/content?version=${match[2]}` : `/${encodeURIComponent(documentId)}/content`;
-}
-var drafts = /* @__PURE__ */ new Map();
-var stateBytes = (room) => Y__namespace.encodeStateAsUpdate(room.ydoc);
-var encodeState = (room) => {
-  let binary = "";
-  for (const byte of stateBytes(room)) binary += String.fromCharCode(byte);
-  return btoa(binary);
-};
-function covered(room, vector, receipt) {
-  const decode = (value) => Uint8Array.from(atob(value), (c) => c.charCodeAt(0));
-  const server = Y__namespace.decodeStateVector(decode(vector)), local = Y__namespace.decodeStateVector(Y__namespace.encodeStateVector(room.ydoc));
-  for (const [client, clock] of local) if ((server.get(client) || 0) < clock) return false;
-  const deleted = Y__namespace.decodeUpdate(stateBytes(room)).ds.clients;
-  const saved = Y__namespace.decodeUpdate(decode(receipt)).ds.clients;
-  for (const [client, ranges] of deleted)
-    for (const range of ranges) {
-      if (!(saved.get(client) || []).some(
-        (s) => s.clock <= range.clock && s.clock + s.len >= range.clock + range.len
-      ))
-        return false;
-    }
-  return true;
-}
-var EditorBoundary = class extends React3__default.default.Component {
-  state = {};
-  static getDerivedStateFromError(error) {
-    return { error };
-  }
-  render() {
-    return this.state.error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: "native-docx-error", children: [
-      "Could not render this Word document: ",
-      this.state.error.message
-    ] }) : this.props.children;
-  }
-};
-function DocxParticipants({ session }) {
-  const [people, setPeople] = React3.useState([]);
-  React3.useEffect(() => {
-    if (!session) return;
-    setPeople(session.participants());
-    return session.subscribeParticipants(setPeople);
-  }, [session]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "native-docx-presence", "aria-label": "People viewing this document", children: people.map((p) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-avatar", title: p.name, children: p.name.split(" ").map((s) => s[0]).slice(0, 2).join("") }, p.actorId)) });
-}
 function RibbonMenu({
   label,
   icon,
-  children
+  children,
+  className,
+  testId
 }) {
   const [open, setOpen] = React3.useState(false);
   const element = React3.useRef(null);
@@ -1954,10 +2263,11 @@ function RibbonMenu({
       "button",
       {
         type: "button",
-        className: "native-docx-ribbon-trigger",
+        className: ["native-docx-ribbon-trigger", className].filter(Boolean).join(" "),
         "aria-label": label,
         title: label,
         "aria-expanded": open,
+        "data-testid": testId,
         onMouseDown: (event) => event.preventDefault(),
         onClick: () => setOpen((value) => !value),
         children: icon
@@ -1973,11 +2283,295 @@ function RibbonMenu({
           if (!(event.target instanceof HTMLInputElement || event.target instanceof HTMLSelectElement))
             event.preventDefault();
         },
-        children
+        children: typeof children === "function" ? children(() => setOpen(false)) : children
+      }
+    )
+  ] });
+}
+
+// src/docx/wordStyles.ts
+var QUICK_STYLES = ["Normal", "Title", "heading 1", "heading 2", "heading 3"];
+function findStyle(options, name) {
+  const wanted = name.toLowerCase();
+  const id = name.replace(/(^|\s)(\w)/g, (_, _s, c) => c.toUpperCase());
+  return options.find((o) => o.name.toLowerCase() === wanted) ?? options.find((o) => o.styleId.toLowerCase() === id.toLowerCase());
+}
+function styleLabel(name) {
+  return name === name.toLowerCase() ? name.replace(/(^|\s)(\w)/g, (m) => m.toUpperCase()) : name;
+}
+function wordShortcut(event) {
+  const mod = event.ctrlKey || event.metaKey;
+  if (!mod) return null;
+  if (event.altKey && !event.shiftKey) {
+    switch (event.code) {
+      case "KeyF":
+        return "footnote";
+      case "KeyD":
+        return "endnote";
+      case "Digit1":
+      case "Numpad1":
+        return "heading 1";
+      case "Digit2":
+      case "Numpad2":
+        return "heading 2";
+      case "Digit3":
+      case "Numpad3":
+        return "heading 3";
+    }
+  }
+  if (event.shiftKey && !event.altKey && event.code === "KeyN") return "Normal";
+  return null;
+}
+var FILTER_FROM = 8;
+function previewStyle(option) {
+  const { fontFamily, fontSizePt, bold, italic, color } = option.preview;
+  return {
+    fontFamily: fontFamily ? `"${fontFamily}", serif` : void 0,
+    // In the face of the style, but within a row: 9-18pt.
+    fontSize: fontSizePt ? `${Math.min(18, Math.max(9, fontSizePt))}pt` : void 0,
+    fontWeight: bold ? 700 : void 0,
+    fontStyle: italic ? "italic" : void 0,
+    color: color ? `#${color}` : void 0
+  };
+}
+function Gallery({ close }) {
+  const { value, setValue, options, isEnabled } = react.useParagraphStyle();
+  const editor = react.useDocxEditor();
+  const [query, setQuery] = React3.useState("");
+  const quick = React3.useMemo(
+    () => QUICK_STYLES.map((name) => findStyle(options, name)).filter(
+      (o) => !!o
+    ),
+    [options]
+  );
+  const shown = React3.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return q ? options.filter(
+      (o) => o.name.toLowerCase().includes(q) || o.styleId.toLowerCase().includes(q)
+    ) : options;
+  }, [options, query]);
+  const apply = (option) => {
+    setValue(option.styleId);
+    close();
+    editor?.surface?.focus();
+  };
+  const nav = chunk7UTB4PHM_cjs.useListKeyNav({
+    open: true,
+    items: shown,
+    onPick: apply,
+    onDismiss: close,
+    resetKey: query
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-style-gallery", "data-testid": "docx-style-gallery", children: [
+    quick.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "native-docx-style-quick", role: "group", "aria-label": "Quick styles", children: quick.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": value === option.styleId,
+        disabled: !isEnabled,
+        "data-style-id": option.styleId,
+        title: styleLabel(option.name),
+        onClick: () => apply(option),
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: previewStyle(option), children: styleLabel(option.name) })
+      },
+      option.styleId
+    )) }),
+    options.length > FILTER_FROM && /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        className: "native-docx-style-filter",
+        placeholder: "Find a style",
+        "aria-label": "Find a style",
+        value: query,
+        autoFocus: true,
+        onChange: (event) => setQuery(event.target.value),
+        onKeyDown: (event) => {
+          nav.handleKeyDown(event);
+        },
+        ...nav.comboboxProps
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "ul",
+      {
+        className: "native-docx-style-list",
+        role: "listbox",
+        id: nav.listboxId,
+        "aria-label": "Document styles",
+        children: [
+          shown.map((option, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            "li",
+            {
+              id: chunk7UTB4PHM_cjs.listOptionId(nav.listboxId, index),
+              role: "option",
+              "aria-selected": value === option.styleId,
+              "aria-disabled": !isEnabled,
+              "data-active": index === nav.selectedIndex || void 0,
+              "data-style-id": option.styleId,
+              onMouseEnter: () => nav.setSelectedIndex(index),
+              onClick: () => isEnabled && apply(option),
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: previewStyle(option), children: styleLabel(option.name) })
+            },
+            option.styleId
+          )),
+          shown.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "native-docx-style-empty", children: "No matching style" })
+        ]
+      }
+    )
+  ] });
+}
+function StyleGallery() {
+  const { value, options } = react.useParagraphStyle();
+  const current = options.find((o) => o.styleId === value);
+  const name = current ? styleLabel(current.name) : "Styles";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    RibbonMenu,
+    {
+      label: "Styles",
+      className: "native-docx-style-trigger",
+      testId: "docx-style-trigger",
+      icon: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-style-current", "data-testid": "docx-current-style", children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 12, "aria-hidden": true })
+      ] }),
+      children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Gallery, { close })
+    }
+  );
+}
+function useInsertNote(kind) {
+  const command = react.useEditorCommand(kind === "footnote" ? "insert.footnote" : "insert.endnote");
+  const { options } = react.useParagraphStyle();
+  const editor = react.useDocxEditor();
+  const insert = () => {
+    if (!command.execute()) return false;
+    const text = findStyle(options, `${kind} text`);
+    if (text && editor)
+      withDirectEditing(
+        editor,
+        () => editor.exec({ type: "setParagraphStyle", styleId: text.styleId })
+      );
+    return true;
+  };
+  return { insert, isEnabled: command.isEnabled, disabledReason: command.disabledReason };
+}
+function NoteAction({
+  kind,
+  label,
+  shortcut,
+  icon
+}) {
+  const note = useInsertNote(kind);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    react.DocxEditor.Toolbar.Action,
+    {
+      label: `${label} (${shortcut})`,
+      icon,
+      disabled: !note.isEnabled,
+      disabledReason: note.disabledReason ?? void 0,
+      onSelect: () => void note.insert(),
+      className: `native-docx-insert-${kind}`
+    }
+  );
+}
+function NoteButtons() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NoteAction,
+      {
+        kind: "footnote",
+        label: "Insert footnote",
+        shortcut: "Ctrl+Alt+F",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Superscript, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NoteAction,
+      {
+        kind: "endnote",
+        label: "Insert endnote",
+        shortcut: "Ctrl+Alt+D",
+        icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.NotebookText, { size: 16 })
       }
     )
   ] });
 }
+function WordShortcuts({ scope }) {
+  const footnote = useInsertNote("footnote");
+  const endnote = useInsertNote("endnote");
+  const styles = react.useParagraphStyle();
+  const editor = react.useDocxEditor();
+  const latest = React3.useRef({ footnote, endnote, styles, editor });
+  latest.current = { footnote, endnote, styles, editor };
+  React3.useEffect(() => {
+    const element = scope.current;
+    if (!element) return;
+    const onKeyDown = (event) => {
+      const action = wordShortcut(event);
+      if (!action) return;
+      const { footnote: footnote2, endnote: endnote2, styles: styles2, editor: editor2 } = latest.current;
+      if (action === "footnote" || action === "endnote") {
+        if (!(action === "footnote" ? footnote2 : endnote2).insert()) return;
+      } else {
+        const style = findStyle(styles2.options, action);
+        if (!style) return;
+        styles2.setValue(style.styleId);
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      editor2?.surface?.focus();
+    };
+    element.addEventListener("keydown", onKeyDown, true);
+    return () => element.removeEventListener("keydown", onKeyDown, true);
+  }, [scope]);
+  return null;
+}
+function contentPath(documentId) {
+  const match = /^(doc-[A-Za-z0-9]+)@v([1-9][0-9]*)$/.exec(documentId);
+  return match ? `/${encodeURIComponent(match[1])}/content?version=${match[2]}` : `/${encodeURIComponent(documentId)}/content`;
+}
+var drafts = /* @__PURE__ */ new Map();
+var stateBytes = (room) => Y__namespace.encodeStateAsUpdate(room.ydoc);
+var encodeState = (room) => {
+  let binary = "";
+  for (const byte of stateBytes(room)) binary += String.fromCharCode(byte);
+  return btoa(binary);
+};
+function covered(room, vector, receipt) {
+  const decode = (value) => Uint8Array.from(atob(value), (c) => c.charCodeAt(0));
+  const server = Y__namespace.decodeStateVector(decode(vector)), local = Y__namespace.decodeStateVector(Y__namespace.encodeStateVector(room.ydoc));
+  for (const [client, clock] of local) if ((server.get(client) || 0) < clock) return false;
+  const deleted = Y__namespace.decodeUpdate(stateBytes(room)).ds.clients;
+  const saved = Y__namespace.decodeUpdate(decode(receipt)).ds.clients;
+  for (const [client, ranges] of deleted)
+    for (const range of ranges) {
+      if (!(saved.get(client) || []).some(
+        (s) => s.clock <= range.clock && s.clock + s.len >= range.clock + range.len
+      ))
+        return false;
+    }
+  return true;
+}
+var EditorBoundary = class extends React3__default.default.Component {
+  state = {};
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  render() {
+    return this.state.error ? /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alert", className: "native-docx-error", children: [
+      "Could not render this Word document: ",
+      this.state.error.message
+    ] }) : this.props.children;
+  }
+};
+function DocxParticipants({ session }) {
+  const [people, setPeople] = React3.useState([]);
+  React3.useEffect(() => {
+    if (!session) return;
+    setPeople(session.participants());
+    return session.subscribeParticipants(setPeople);
+  }, [session]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "native-docx-presence", "aria-label": "People viewing this document", children: people.map((p) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-avatar", title: p.name, children: p.name.split(" ").map((s) => s[0]).slice(0, 2).join("") }, p.actorId)) });
+}
 function DefinedTermButtons() {
   const terms = useDefinedTerms();
   if (!terms) return null;
@@ -2010,13 +2604,17 @@ function DefinedTermButtons() {
     )
   ] });
 }
-function DocxRibbon({ onSave }) {
+function DocxRibbon({
+  onSave,
+  badge
+}) {
   const [tab, setTab] = React3.useState("Home");
   const t = react.useChromeTranslate();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "native-docx-ribbon", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("select", { "aria-label": "Ribbon tab", value: tab, onChange: (event) => setTab(event.target.value), children: [
       /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Home" }),
       /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Insert" }),
+      /* @__PURE__ */ jsxRuntime.jsx("option", { children: "References" }),
       /* @__PURE__ */ jsxRuntime.jsx("option", { children: "Review" })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.DocxEditor.Toolbar, { t, preset: false, onSave, children: [
@@ -2024,6 +2622,7 @@ function DocxRibbon({ onSave }) {
       /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Redo, {}),
       /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Save, {}),
       tab === "Home" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(StyleGallery, {}),
         /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Bold, {}),
         /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Italic, {}),
         /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Underline, {}),
@@ -2034,7 +2633,6 @@ function DocxRibbon({ onSave }) {
           /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Highlight, {})
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(RibbonMenu, { label: "More formatting", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { size: 16 }), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.StylePicker, {}),
           /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Alignment, {}),
           /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.BulletList, {}),
           /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.NumberedList, {}),
@@ -2051,12 +2649,14 @@ function DocxRibbon({ onSave }) {
         /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Link, {}),
         /* @__PURE__ */ jsxRuntime.jsx(DefinedTermButtons, {})
       ] }),
+      tab === "References" && /* @__PURE__ */ jsxRuntime.jsx(NoteButtons, {}),
       tab === "Review" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.EditingMode, {}),
         /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Comments, {}),
         /* @__PURE__ */ jsxRuntime.jsx(RibbonMenu, { label: "Review options", icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Ellipsis, { size: 16 }), children: /* @__PURE__ */ jsxRuntime.jsx(react.DocxEditor.Toolbar.Reviewers, {}) })
       ] })
-    ] })
+    ] }),
+    badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "native-docx-ribbon-badge", "data-testid": "docx-ribbon-badge", children: badge })
   ] });
 }
 var fixedZoomMode = { type: "fixed" };
@@ -2321,7 +2921,10 @@ function NativeDocxEditor({
     const resize = new ResizeObserver(fit);
     const chrome = new MutationObserver(fit);
     resize.observe(viewport);
-    chrome.observe(viewport, { attributes: true, attributeFilter: ["style", "data-review-pane"] });
+    chrome.observe(viewport, {
+      attributes: true,
+      attributeFilter: ["style", "data-review-pane", "data-review-margin"]
+    });
     fit();
     fitCleanup.current = () => {
       resize.disconnect();
@@ -2403,7 +3006,17 @@ function NativeDocxEditor({
                       trackMoves: true
                     }
                   ),
-                  !stream && /* @__PURE__ */ jsxRuntime.jsx(DocxRibbon, { onSave: () => void saveVersion() }),
+                  !stream && /* @__PURE__ */ jsxRuntime.jsx(
+                    DocxRibbon,
+                    {
+                      onSave: () => void saveVersion(),
+                      badge: (
+                        // Says the document is shared live, in place of a title row above the ribbon.
+                        ready.room && ready.canEdit && !snapshot ? /* @__PURE__ */ jsxRuntime.jsx("span", { title: "Edits sync live with everyone who has this document open", children: "Co-edit mode" }) : void 0
+                      )
+                    }
+                  ),
+                  !stream && /* @__PURE__ */ jsxRuntime.jsx(WordShortcuts, { scope: stageRef }),
                   /* @__PURE__ */ jsxRuntime.jsxs(
                     "div",
                     {
@@ -2554,5 +3167,5 @@ exports.useDefinedTerms = useDefinedTerms;
 exports.useReview = useReview;
 exports.useReviewItem = useReviewItem;
 exports.withDirectEditing = withDirectEditing;
-//# sourceMappingURL=chunk-E2AAIMXO.cjs.map
-//# sourceMappingURL=chunk-E2AAIMXO.cjs.map
+//# sourceMappingURL=chunk-HGJGALLN.cjs.map
+//# sourceMappingURL=chunk-HGJGALLN.cjs.map