@arbidocs/blocks 0.4.95 → 0.4.96

package/dist/{chunk-WXLKMEMB.js → chunk-K27SDLLN.js}

@@ -5,14 +5,14 @@ import { unzipSync, strFromU8, strToU8, zipSync } from 'fflate';
 import { collectReviewItems, revisionItemsOf } from '@docx-editor.dev/core/store';
 import React3, { createContext, useContext, useState, useRef, useCallback, useEffect, useLayoutEffect, useMemo } from 'react';
 import { useDocxEditor, ReviewRailContext, useEditorSnapshot, useChromeTranslate, DocxEditor, createFontSource } from '@docx-editor.dev/react';
+import { AiMarkdown, Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Button, DialogFooter, cn, splitMarkdownBlocks } from '@arbidocs/react/ui';
+import { MessageSquarePlus, MessageSquare, PencilLine, ChevronLeft, ChevronRight, X, ChevronUp, ChevronDown, CheckCheck, RotateCcw, CircleCheck, Trash2, Check, SendHorizontal, Type, Ellipsis, RefreshCw, WifiOff, Download, Save, BookA, ListRestart } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, Button, DialogFooter, cn, splitMarkdownBlocks, AiMarkdown } from '@arbidocs/react/ui';
 import { renderToStaticMarkup } from 'react-dom/server';
 import * as Y from 'yjs';
 import { DOCUMENT_COLLABORATION_VERSIONS, collaborationModule } from '@arbidocs/coedit';
 import { createHocuspocusCollaboration } from '@arbidocs/coedit/hocuspocus';
-import { Type, Ellipsis, RefreshCw, WifiOff, Check, Download, Save, BookA, ListRestart } from 'lucide-react';
 
 function normalizeDocxExport(data) {
   const files = unzipSync(new Uint8Array(data));
@@ -136,7 +136,25 @@ var ReviewItemContext = createContext(null);
 function useReviewItem() {
   return 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",
@@ -152,33 +170,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__ */ jsx("span", { className: "native-docx-review-avatar", "aria-hidden": "true", children: entry.initials });
+  return /* @__PURE__ */ 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__ */ jsxs("div", { className: "native-docx-review-message", children: [
-    /* @__PURE__ */ jsxs("div", { className: "native-docx-review-byline", children: [
-      /* @__PURE__ */ jsx(Avatar, { entry }),
+function Byline({ entry, children }) {
+  const date = parseDate(entry.date);
+  return /* @__PURE__ */ jsxs("div", { className: "native-docx-review-byline", children: [
+    /* @__PURE__ */ jsx(Avatar, { entry }),
+    /* @__PURE__ */ jsxs("div", { className: "native-docx-review-who", children: [
       /* @__PURE__ */ jsx("span", { className: "native-docx-review-author", children: entry.author || "Reviewer" }),
-      /* @__PURE__ */ jsx("time", { className: "native-docx-review-date", children: formatDate(entry.date) })
+      /* @__PURE__ */ jsxs("span", { className: "native-docx-review-meta", children: [
+        kindLabel(entry),
+        date && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " \xB7 ",
+          /* @__PURE__ */ jsx(
+            "time",
+            {
+              className: "native-docx-review-date",
+              dateTime: date.toISOString(),
+              title: date.toLocaleString(),
+              children: relativeDate(date)
+            }
+          )
+        ] })
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("p", { className: "native-docx-review-text", "data-testid": "review-text", children: entry.text })
+    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__ */ jsxs("p", { className: "native-docx-review-change", "data-testid": "review-text", children: [
+    removed && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("del", { children: removed }),
+      /* @__PURE__ */ jsx("span", { className: "native-docx-review-arrow", "aria-hidden": "true", children: "\u2192" })
+    ] }),
+    struck ? /* @__PURE__ */ jsx("del", { children: entry.text }) : added ? /* @__PURE__ */ jsx("ins", { children: entry.text }) : /* @__PURE__ */ jsx("span", { children: entry.text })
+  ] });
+}
+function CommentText({ text, testId }) {
+  return /* @__PURE__ */ jsx("div", { className: "native-docx-review-text", "data-testid": testId, children: /* @__PURE__ */ jsx(AiMarkdown, { className: "native-docx-review-markdown", allowHtml: false, children: text }) });
+}
+function Reply({ entry }) {
+  return /* @__PURE__ */ jsxs("div", { className: "native-docx-review-message", children: [
+    /* @__PURE__ */ jsx(Byline, { entry }),
+    /* @__PURE__ */ jsx(CommentText, { text: commentText(entry) })
   ] });
 }
 function ReplyForm({
   entry,
-  review
+  review,
+  onDismiss
 }) {
   const [text, setText] = useState("");
   return /* @__PURE__ */ jsxs(
     "form",
     {
       className: "native-docx-review-reply",
+      onClick: (event) => event.stopPropagation(),
       onSubmit: (event) => {
         event.preventDefault();
         const value = text.trim();
@@ -190,25 +277,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__ */ jsx("button", { type: "submit", disabled: !text.trim(), children: "Reply" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "submit",
+            className: "native-docx-review-icon native-docx-review-send",
+            "aria-label": "Reply",
+            title: "Reply",
+            disabled: !text.trim(),
+            children: /* @__PURE__ */ jsx(SendHorizontal, { size: 14 })
+          }
+        ),
         /* @__PURE__ */ 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__ */ jsx(X, { size: 14 })
           }
         )
       ]
@@ -221,7 +322,8 @@ function Card({
   review,
   extra,
   cardRef,
-  top
+  top,
+  onDismiss
 }) {
   const resolved = entry.kind === "comment" && entry.resolved;
   return /* @__PURE__ */ jsx(ReviewItemContext.Provider, { value: entry, children: /* @__PURE__ */ jsxs(
@@ -240,60 +342,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__ */ jsx("div", { className: "native-docx-review-kind", children: REVISION_LABELS[entry.revisionKind] ?? "Change" }),
-        /* @__PURE__ */ jsx(Message, { entry }),
-        replies.map((reply) => /* @__PURE__ */ jsx(Message, { entry: reply }, reply.key)),
+        /* @__PURE__ */ jsx(Byline, { entry, children: entry.kind === "comment" && /* @__PURE__ */ jsxs("div", { className: "native-docx-review-tools", children: [
+          /* @__PURE__ */ 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__ */ jsx(RotateCcw, { size: 14 }) : /* @__PURE__ */ jsx(CircleCheck, { size: 14 })
+            }
+          ),
+          /* @__PURE__ */ 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__ */ jsx(Trash2, { size: 14 })
+            }
+          )
+        ] }) }),
+        entry.kind === "revision" ? /* @__PURE__ */ jsx(ChangeText, { entry }) : /* @__PURE__ */ jsx(CommentText, { text: commentText(entry), testId: "review-text" }),
+        replies.length > 0 && /* @__PURE__ */ jsx("div", { className: "native-docx-review-thread", children: replies.map((reply) => /* @__PURE__ */ jsx(Reply, { entry: reply }, reply.key)) }),
         extra,
-        /* @__PURE__ */ jsxs("div", { className: "native-docx-review-actions", children: [
-          entry.kind === "revision" && !entry.readOnly && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "data-testid": "review-accept",
-                onClick: () => review.accept(entry),
-                children: "Accept"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "data-testid": "review-reject",
-                onClick: () => review.reject(entry),
-                children: "Reject"
-              }
-            )
-          ] }),
-          entry.kind === "comment" && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "data-testid": "review-resolve",
-                onClick: () => review.resolve(entry, !entry.resolved),
-                children: entry.resolved ? "Reopen" : "Resolve"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                "data-testid": "review-delete",
-                onClick: () => review.remove(entry),
-                children: "Delete"
-              }
-            )
-          ] })
+        entry.kind === "revision" && !entry.readOnly && /* @__PURE__ */ jsxs("div", { className: "native-docx-review-decide", children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "native-docx-review-accept",
+              "data-testid": "review-accept",
+              onClick: (event) => {
+                event.stopPropagation();
+                review.accept(entry);
+              },
+              children: [
+                /* @__PURE__ */ jsx(Check, { size: 14 }),
+                "Accept"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "native-docx-review-reject",
+              "data-testid": "review-reject",
+              onClick: (event) => {
+                event.stopPropagation();
+                review.reject(entry);
+              },
+              children: [
+                /* @__PURE__ */ jsx(X, { size: 14 }),
+                "Reject"
+              ]
+            }
+          )
         ] }),
-        entry.isActive && entry.kind !== "custom" && /* @__PURE__ */ jsx(ReplyForm, { entry, review })
+        entry.isActive && entry.kind !== "custom" && /* @__PURE__ */ jsx(ReplyForm, { entry, review, onDismiss })
       ]
     }
   ) });
@@ -313,7 +440,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());
@@ -325,22 +453,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__ */ jsxs("div", { className: "native-docx-review-actions", children: [
-          /* @__PURE__ */ jsx("button", { type: "submit", disabled: !text.trim(), children: "Comment" }),
-          /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "review-draft-cancel", onClick: onCancel, children: "Cancel" })
+        /* @__PURE__ */ jsxs("div", { className: "native-docx-review-decide", children: [
+          /* @__PURE__ */ jsx("button", { type: "submit", className: "native-docx-review-accept", disabled: !text.trim(), children: "Comment" }),
+          /* @__PURE__ */ 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] = useState({
+    element: null,
+    width: 0
+  });
+  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
 }) {
@@ -351,6 +510,10 @@ function DocxEditorReviewRail({
   const [tops, setTops] = useState({});
   const [showResolved, setShowResolved] = useState(true);
   const elements = useRef(/* @__PURE__ */ new Map());
+  const anchor = useRef(null);
+  const toolbar = useRef(null);
+  const area = useScrollArea(anchor, review.ready);
+  const layout = area.width === 0 || area.width >= REVIEW_MARGIN_MIN_WIDTH ? "margin" : "compact";
   const openDraft = useCallback(() => {
     const placement = editor?.getSelectionPlacement();
     if (!placement) return;
@@ -359,9 +522,22 @@ function DocxEditorReviewRail({
   }, [editor, review.setPaneOpen]);
   useEffect(() => registry?.register(), [registry]);
   useEffect(() => registry?.registerCommentDraft(openDraft), [registry, openDraft]);
+  const shownLayout = useRef(null);
+  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 = useCallback(
     (entry) => review.items.filter(
@@ -369,10 +545,49 @@ function DocxEditorReviewRail({
     ),
     [review.items]
   );
+  const column = layout === "margin" && review.paneOpen && (top.length > 0 || draft !== null);
+  const bubbleOpen = layout === "compact" && (review.paneOpen || draft !== null);
+  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 = useCallback(() => {
+    setDraft(null);
+    if (layout === "compact") review.setPaneOpen(false);
+    else review.setActive(null);
+  }, [layout, review.setPaneOpen, review.setActive]);
+  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]);
   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
@@ -390,7 +605,7 @@ function DocxEditorReviewRail({
       return same ? previous : next;
     });
   });
-  if (!review.ready) return null;
+  if (!review.ready) return /* @__PURE__ */ jsx("div", { ref: anchor, className: "native-docx-review" });
   const selection = editor?.getSelectionPlacement();
   const addComment = selection && /* @__PURE__ */ jsx(
     "button",
@@ -399,108 +614,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__ */ jsx(MessageSquarePlus, { size: 14 })
     }
   );
-  if (!review.paneOpen) {
-    return /* @__PURE__ */ jsxs("div", { className: "native-docx-review-markers", "data-testid": "review-markers", children: [
+  if (column) {
+    return /* @__PURE__ */ jsx("div", { ref: anchor, className: "native-docx-review", children: /* @__PURE__ */ jsxs("aside", { className: "native-docx-review-pane", "data-testid": "review-pane", "aria-label": "Review", children: [
       addComment,
+      /* @__PURE__ */ jsxs("div", { ref: toolbar, className: "native-docx-review-toolbar", "data-testid": "review-toolbar", children: [
+        /* @__PURE__ */ 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__ */ jsxs("label", { className: "native-docx-review-switch", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              "data-testid": "review-show-resolved",
+              checked: showResolved,
+              onChange: (event) => setShowResolved(event.target.checked)
+            }
+          ),
+          "Resolved"
+        ] }),
+        changes > 0 && /* @__PURE__ */ jsx(BulkActions, { review, navigate: true })
+      ] }),
+      draft && /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { ref: anchor, className: "native-docx-review", children: /* @__PURE__ */ 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__ */ 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__ */ jsx(MessageSquare, { size: 13 }) : /* @__PURE__ */ jsx(PencilLine, { size: 13 }),
+            cluster.entries.length > 1 && /* @__PURE__ */ jsx("span", { className: "native-docx-review-count", children: cluster.entries.length })
+          ]
         },
-        entry.key
-      ))
-    ] });
-  }
-  return /* @__PURE__ */ jsxs("aside", { className: "native-docx-review-pane", "data-testid": "review-pane", "aria-label": "Review", children: [
-    addComment,
-    /* @__PURE__ */ jsxs("div", { className: "native-docx-review-toolbar", "data-testid": "review-toolbar", children: [
-      hasChanges && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-testid": "review-previous",
-            onClick: () => review.navigate("previous"),
-            children: "Previous change"
-          }
-        ),
-        /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "review-next", onClick: () => review.navigate("next"), children: "Next change" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            "data-testid": "review-accept-all",
-            onClick: () => review.resolveAll("accept"),
-            children: "Accept all"
-          }
-        ),
-        /* @__PURE__ */ 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__ */ 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__ */ jsxs("label", { children: [
-        /* @__PURE__ */ jsx(
-          "input",
+        },
+        children: draft ? /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "native-docx-review-bubble-head", children: [
+            top.length > 1 && position >= 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ 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__ */ jsx(ChevronLeft, { size: 14 })
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "native-docx-review-summary", children: [
+                position + 1,
+                " of ",
+                top.length
+              ] }),
+              /* @__PURE__ */ 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__ */ jsx(ChevronRight, { size: 14 })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ 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__ */ jsx(X, { size: 14 })
+              }
+            )
+          ] }),
+          shown?.entries.map((entry) => /* @__PURE__ */ jsx(
+            Card,
+            {
+              entry,
+              replies: repliesOf(entry),
+              review,
+              extra: children?.(entry),
+              onDismiss: dismiss
+            },
+            entry.key
+          )),
+          !shown && /* @__PURE__ */ jsx("p", { className: "native-docx-review-empty", "data-testid": "review-empty", children: "No comments or changes." }),
+          changes > 1 && /* @__PURE__ */ jsx("div", { className: "native-docx-review-bubble-foot", children: /* @__PURE__ */ jsx(BulkActions, { review }) })
+        ] })
+      }
+    )
+  ] }) });
+}
+function BulkActions({ review, navigate }) {
+  return /* @__PURE__ */ jsxs("div", { className: "native-docx-review-bulk", children: [
+    navigate && /* @__PURE__ */ jsxs("span", { className: "native-docx-review-segment", children: [
+      /* @__PURE__ */ 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__ */ jsx(ChevronUp, { size: 14 })
+        }
+      ),
+      /* @__PURE__ */ 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__ */ jsx(ChevronDown, { size: 14 })
+        }
+      )
     ] }),
-    draft && /* @__PURE__ */ jsx(
-      Draft,
+    /* @__PURE__ */ 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__ */ jsx(CheckCheck, { size: 14 }),
+          "Accept all"
+        ]
       }
     ),
-    top.map((entry) => /* @__PURE__ */ jsx(
-      Card,
+    /* @__PURE__ */ 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__ */ 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__ */ jsx(X, { size: 14 }),
+          "Reject all"
+        ]
+      }
+    )
   ] });
 }
 function ReviewCardSlot({ children }) {
@@ -582,14 +943,7 @@ function DocxCommentActivity() {
           /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: "Document comment" }) }),
           thread.map((entry) => /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-b pb-4 last:border-0", children: [
             /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: entry.author || "Reviewer" }),
-            /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: "whitespace-pre-wrap break-words text-sm",
-                "data-testid": "docx-full-comment-text",
-                children: entry.text
-              }
-            )
+            /* @__PURE__ */ jsx("div", { "data-testid": "docx-full-comment-text", children: /* @__PURE__ */ jsx(AiMarkdown, { allowHtml: false, children: commentText(entry) }) })
           ] }, entry.key)),
           statuses.map(([id, run]) => /* @__PURE__ */ jsxs("p", { role: "status", className: "text-sm", children: [
             run.label,
@@ -1985,7 +2339,10 @@ function DefinedTermButtons() {
     )
   ] });
 }
-function DocxRibbon({ onSave }) {
+function DocxRibbon({
+  onSave,
+  badge
+}) {
   const [tab, setTab] = useState("Home");
   const t = useChromeTranslate();
   return /* @__PURE__ */ jsxs("div", { className: "native-docx-ribbon", children: [
@@ -2031,7 +2388,8 @@ function DocxRibbon({ onSave }) {
         /* @__PURE__ */ jsx(DocxEditor.Toolbar.Comments, {}),
         /* @__PURE__ */ jsx(RibbonMenu, { label: "Review options", icon: /* @__PURE__ */ jsx(Ellipsis, { size: 16 }), children: /* @__PURE__ */ jsx(DocxEditor.Toolbar.Reviewers, {}) })
       ] })
-    ] })
+    ] }),
+    badge && /* @__PURE__ */ jsx("span", { className: "native-docx-ribbon-badge", "data-testid": "docx-ribbon-badge", children: badge })
   ] });
 }
 var fixedZoomMode = { type: "fixed" };
@@ -2296,7 +2654,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();
@@ -2378,7 +2739,16 @@ function NativeDocxEditor({
                       trackMoves: true
                     }
                   ),
-                  !stream && /* @__PURE__ */ jsx(DocxRibbon, { onSave: () => void saveVersion() }),
+                  !stream && /* @__PURE__ */ 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__ */ jsx("span", { title: "Edits sync live with everyone who has this document open", children: "Co-edit mode" }) : void 0
+                      )
+                    }
+                  ),
                   /* @__PURE__ */ jsxs(
                     "div",
                     {
@@ -2510,5 +2880,5 @@ async function loadFonts(baseUrl) {
 }
 
 export { DEFAULT_DEFINED_TERMS_LABELS, DEFINED_TERM_TRIGGER, DefinedTermsProvider, DocxCommentActivity, DocxEditorReview, DocxMentions, DocxParticipants, DocxRibbon, NativeDocxEditor, editorPort, findDefinitionsSection, insertDefinedTerm, loadDocxFonts, normalizeDocxExport, reviewModule, updateDefinitions, useDefinedTerms, useReview, useReviewItem, withDirectEditing };
-//# sourceMappingURL=chunk-WXLKMEMB.js.map
-//# sourceMappingURL=chunk-WXLKMEMB.js.map
+//# sourceMappingURL=chunk-K27SDLLN.js.map
+//# sourceMappingURL=chunk-K27SDLLN.js.map