@extend-ai/react-docx 0.7.1 → 0.7.3

package/dist/index.js

@@ -4581,10 +4581,13 @@ var BASE_DOC_STYLE = {
   transition: "box-shadow 0.2s ease"
 };
 var TRACKED_CHANGE_GUTTER_WIDTH_PX = 300;
-var TRACKED_CHANGE_GUTTER_CARD_LEFT_PX = 28;
-var TRACKED_CHANGE_GUTTER_CARD_RIGHT_PX = 10;
-var TRACKED_CHANGE_GUTTER_CARD_GAP_PX = 8;
-var TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX = 52;
+var TRACKED_CHANGE_GUTTER_CARD_LEFT_PX = 48;
+var TRACKED_CHANGE_GUTTER_CARD_RIGHT_PX = 12;
+var TRACKED_CHANGE_GUTTER_CARD_GAP_PX = 4;
+var TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX = 30;
+var TRACKED_CHANGE_GUTTER_BEND_OFFSET_PX = 8;
+var TRACKED_CHANGE_GUTTER_CONNECTOR_LANE_GAP_PX = 7;
+var TRACKED_CHANGE_GUTTER_CONNECTOR_LANE_COUNT = 5;
 var INITIAL_PAGINATION_STABILITY_IDLE_MS = 240;
 function scheduleDomWrite(callback) {
   if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
@@ -12997,9 +13000,10 @@ function trackedInlineStyle(baseStyle, change) {
     return baseStyle;
   }
   if (change.kind === "insertion" || change.kind === "move-to") {
+    const accentColor = change.kind === "move-to" ? "#70ad47" : "#dc2626";
     return {
       ...baseStyle,
-      color: "#2563eb",
+      color: accentColor,
       textDecoration: mergeTextDecorations(
         baseStyle.textDecoration,
         "underline"
@@ -14624,11 +14628,22 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
     if (!commentIds || commentIds.length === 0) {
       return void 0;
     }
-    const accent = commentAccentColor(documentTheme);
-    return {
-      backgroundColor: documentTheme === "dark" ? "rgba(251, 191, 36, 0.24)" : "rgba(251, 191, 36, 0.3)",
-      borderBottom: `2px solid ${accent}`
-    };
+    return commentHighlightStyle(documentTheme, commentIds[0]);
+  };
+  const currentAnnotationAttributes = (trackedInlineChange) => {
+    const attributes = {};
+    if (trackedInlineChange) {
+      attributes["data-docx-tracked-change"] = trackedInlineChange.kind;
+      attributes["data-docx-tracked-change-id"] = trackedInlineChange.id;
+    }
+    const commentIds = commentMarkup?.commentIdsByVisibleChildIndex[trackedVisibleChildCursor];
+    if (commentIds && commentIds.length > 0) {
+      attributes["data-docx-comment-ids"] = commentIds.join(" ");
+      if (commentIds.length === 1) {
+        attributes["data-docx-comment-id"] = String(commentIds[0]);
+      }
+    }
+    return attributes;
   };
   const consumeTrackedVisibleChild = (child) => {
     if (!trackedMarkup && !commentMarkup) {
@@ -14662,11 +14677,11 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
     fallbackTabWidthPx,
     checkboxChoiceRow
   );
-  const appendPlainTextWithSoftBreakControl = (target, keySeed, text, style, measureStyle) => {
+  const appendPlainTextWithSoftBreakControl = (target, keySeed, text, style, measureStyle, spanAttributes) => {
     const shouldControlSoftBreakStretch = paragraph.style?.align === "justify" && text.includes("\n");
     if (!shouldControlSoftBreakStretch) {
       target.push(
-        /* @__PURE__ */ jsx("span", { style, children: text }, keySeed)
+        /* @__PURE__ */ jsx("span", { ...spanAttributes, style, children: text }, keySeed)
       );
       trackTextAdvance(text, measureStyle);
       return;
@@ -14682,6 +14697,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
           /* @__PURE__ */ jsx(
             "span",
             {
+              ...spanAttributes,
               style: isLastSegment ? {
                 ...style,
                 display: "inline-block",
@@ -14832,6 +14848,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
         " "
       );
       const text = textOverride ?? textValue;
+      const annotationAttributes2 = currentAnnotationAttributes(trackedInlineChange);
       if (child.link) {
         const linkHref = child.link;
         const isInternalLink = linkHref.startsWith("#");
@@ -14839,6 +14856,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
           /* @__PURE__ */ jsx(
             "a",
             {
+              ...annotationAttributes2,
               href: linkHref,
               target: isInternalLink ? void 0 : "_blank",
               rel: isInternalLink ? void 0 : "noreferrer noopener",
@@ -14875,12 +14893,20 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
       };
       if (text === "	" && !useTabLeaderLayout && !useAnchoredTabLayout) {
         target.push(
-          /* @__PURE__ */ jsx("span", { style: tabTextStyle(child.style, trackedStyle), children: "\xA0" }, key)
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              ...annotationAttributes2,
+              style: tabTextStyle(child.style, trackedStyle),
+              children: "\xA0"
+            },
+            key
+          )
         );
         return;
       }
       target.push(
-        /* @__PURE__ */ jsx("span", { style: trackedStyle, children: text }, key)
+        /* @__PURE__ */ jsx("span", { ...annotationAttributes2, style: trackedStyle, children: text }, key)
       );
       trackTextAdvance(text, child.style);
       return;
@@ -14949,7 +14975,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
       const sectionImageCursor = sectionImageLocation && !sectionImageInteraction?.isReadOnly && !behavesAsDecorativeBehindTextBackground && (isWrappedFloatingImage || isAbsoluteFloatingImage) ? "move" : void 0;
       const isCenteredStandaloneInlineImage = !isWrappedFloatingImage && !isAbsoluteFloatingImage && paragraph.style?.align === "center" && paragraph.children.length === 1 && paragraph.children[0]?.type === "image";
       const trackedImageStyle = trackedInlineChange?.kind === "insertion" || trackedInlineChange?.kind === "move-to" ? {
-        outline: "2px solid rgba(37, 99, 235, 0.35)",
+        outline: trackedInlineChange.kind === "move-to" ? "2px solid rgba(112, 173, 71, 0.35)" : "2px solid rgba(220, 38, 38, 0.3)",
         outlineOffset: 1
       } : void 0;
       const renderableImageSrc = syntheticTextBoxSvg(
@@ -15135,6 +15161,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
       ),
       ...currentCommentHighlightStyle()
     };
+    const annotationAttributes = currentAnnotationAttributes(trackedInlineChange);
     const noteLabel = noteMarkerLabel(
       child.noteReference,
       safeNoteMarkerIndexes.footnote,
@@ -15145,6 +15172,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
         /* @__PURE__ */ jsx(
           "span",
           {
+            ...annotationAttributes,
             style: {
               ...textStyle,
               verticalAlign: "super",
@@ -15160,7 +15188,15 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
     }
     if ((textOverride ?? child.text) === "	" && !useTabLeaderLayout && !useAnchoredTabLayout) {
       target.push(
-        /* @__PURE__ */ jsx("span", { style: tabTextStyle(child.style, textStyle), children: "\xA0" }, key)
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            ...annotationAttributes,
+            style: tabTextStyle(child.style, textStyle),
+            children: "\xA0"
+          },
+          key
+        )
       );
       return;
     }
@@ -15171,6 +15207,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
         /* @__PURE__ */ jsx(
           "a",
           {
+            ...annotationAttributes,
             href: linkHref,
             target: isInternalLink ? void 0 : "_blank",
             rel: isInternalLink ? void 0 : "noreferrer noopener",
@@ -15203,7 +15240,8 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
       key,
       textOverride ?? child.text,
       textStyle,
-      child.style
+      child.style,
+      annotationAttributes
     );
   };
   const anchoredTabZoneStyle = {
@@ -17914,6 +17952,7 @@ function collectTrackedChangesFromModel(model) {
     trackedMarkup.changes.forEach((change, changeIndex) => {
       trackedChanges.push({
         id: `${paragraphLocationKey(location)}:${change.id}:${changeIndex}`,
+        inlineAnchorId: change.id,
         kind: change.kind,
         author: change.author,
         date: change.date,
@@ -18092,13 +18131,42 @@ function collectCommentsFromModel(model) {
   });
   return comments;
 }
-function commentAccentColor(documentTheme) {
-  return documentTheme === "dark" ? "#fbbf24" : "#d97706";
+function hexColorWithAlpha(color, alpha) {
+  const normalized = color.trim().replace(/^#/, "");
+  if (!/^[\da-f]{6}$/i.test(normalized)) {
+    return color;
+  }
+  const red = Number.parseInt(normalized.slice(0, 2), 16);
+  const green = Number.parseInt(normalized.slice(2, 4), 16);
+  const blue = Number.parseInt(normalized.slice(4, 6), 16);
+  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+}
+function commentAccentColor(documentTheme, commentId) {
+  const lightPalette = ["#5b9bd5", "#d65f5f", "#8f6ac8", "#70ad47", "#d9872b"];
+  const darkPalette = ["#7dd3fc", "#fca5a5", "#c4b5fd", "#86efac", "#fdba74"];
+  if (Number.isFinite(commentId)) {
+    const palette = documentTheme === "dark" ? darkPalette : lightPalette;
+    return palette[Math.abs(Math.round(commentId)) % palette.length];
+  }
+  return documentTheme === "dark" ? darkPalette[0] : lightPalette[0];
+}
+function commentHighlightStyle(documentTheme, commentId) {
+  const accent = commentAccentColor(documentTheme, commentId);
+  return {
+    backgroundColor: hexColorWithAlpha(
+      accent,
+      documentTheme === "dark" ? 0.3 : 0.22
+    ),
+    boxShadow: `inset 0 -1px 0 ${hexColorWithAlpha(
+      accent,
+      documentTheme === "dark" ? 0.7 : 0.48
+    )}`
+  };
 }
 function estimateCommentCardHeight(comment) {
   const snippet = comment.text || "Comment";
-  const lines = Math.max(1, Math.ceil(snippet.length / 30));
-  return Math.max(TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX, 34 + lines * 14);
+  const lines = Math.min(2, Math.max(1, Math.ceil(snippet.length / 42)));
+  return Math.max(TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX, 24 + lines * 11);
 }
 function trackedChangeKindLabel(kind) {
   switch (kind) {
@@ -18120,16 +18188,16 @@ function trackedChangeKindLabel(kind) {
 }
 function trackedChangeAccentColor(kind, documentTheme) {
   const palette = documentTheme === "dark" ? {
-    insertion: "#60a5fa",
+    insertion: "#f87171",
     deletion: "#f87171",
-    moveFrom: "#fbbf24",
-    moveTo: "#22d3ee",
+    moveFrom: "#86efac",
+    moveTo: "#86efac",
     format: "#c084fc"
   } : {
-    insertion: "#2563eb",
+    insertion: "#dc2626",
     deletion: "#dc2626",
-    moveFrom: "#d97706",
-    moveTo: "#0891b2",
+    moveFrom: "#70ad47",
+    moveTo: "#70ad47",
     format: "#7c3aed"
   };
   switch (kind) {
@@ -18148,6 +18216,9 @@ function trackedChangeAccentColor(kind, documentTheme) {
       return palette.format;
   }
 }
+function trackedChangeUsesGutterBalloon(change) {
+  return change.kind !== "insertion" && change.kind !== "move-to";
+}
 function gutterAnnotationSortTuple(location) {
   if (location.kind === "paragraph") {
     return [location.nodeIndex, 0, 0, 0];
@@ -18228,10 +18299,137 @@ function elementRectWithinContainer(element, container) {
     height: elementRect.height / scaleY
   };
 }
+function findFirstElementWithSpaceSeparatedDataValue(rootElement, attributeName, value) {
+  const candidateElements = [];
+  if (rootElement.hasAttribute(attributeName)) {
+    candidateElements.push(rootElement);
+  }
+  candidateElements.push(
+    ...rootElement.querySelectorAll(
+      `[${attributeName}]`
+    )
+  );
+  for (const candidate of candidateElements) {
+    const rawValue = candidate.getAttribute(attributeName);
+    if (!rawValue) {
+      continue;
+    }
+    if (rawValue.split(/\s+/).includes(value)) {
+      return candidate;
+    }
+  }
+  return void 0;
+}
+function findGutterAnnotationScopeElementInPage(pageElement, annotation) {
+  return findTrackedChangeAnchorElementInPage(pageElement, annotation.location);
+}
+function findGutterAnnotationDataAnchorInPage(pageElement, annotation, attributeName, value) {
+  const scopedRoot = findGutterAnnotationScopeElementInPage(
+    pageElement,
+    annotation
+  );
+  if (scopedRoot) {
+    const scopedAnchor = findFirstElementWithSpaceSeparatedDataValue(
+      scopedRoot,
+      attributeName,
+      value
+    );
+    if (scopedAnchor) {
+      return scopedAnchor;
+    }
+  }
+  return findFirstElementWithSpaceSeparatedDataValue(
+    pageElement,
+    attributeName,
+    value
+  );
+}
+function findGutterAnnotationAnchorElementInPage(pageElement, annotation) {
+  if (annotation.trackedChange) {
+    const trackedAnchor = findGutterAnnotationDataAnchorInPage(
+      pageElement,
+      annotation,
+      "data-docx-tracked-change-id",
+      annotation.trackedChange.id
+    );
+    if (trackedAnchor) {
+      return trackedAnchor;
+    }
+    const inlineAnchorId = annotation.trackedChange.inlineAnchorId;
+    if (inlineAnchorId && inlineAnchorId !== annotation.trackedChange.id) {
+      const inlineTrackedAnchor = findGutterAnnotationDataAnchorInPage(
+        pageElement,
+        annotation,
+        "data-docx-tracked-change-id",
+        inlineAnchorId
+      );
+      if (inlineTrackedAnchor) {
+        return inlineTrackedAnchor;
+      }
+    }
+  }
+  if (annotation.comment) {
+    const commentAnchor = findGutterAnnotationDataAnchorInPage(
+      pageElement,
+      annotation,
+      "data-docx-comment-ids",
+      String(annotation.comment.commentId)
+    );
+    if (commentAnchor) {
+      return commentAnchor;
+    }
+  }
+  return findTrackedChangeAnchorElementInPage(pageElement, annotation.location);
+}
 function estimateTrackedChangeCardHeight(change) {
   const snippet = normalizeTrackedChangeSnippet(change.text) ?? trackedChangeKindLabel(change.kind);
-  const lines = Math.max(1, Math.ceil(snippet.length / 30));
-  return Math.max(TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX, 34 + lines * 14);
+  const lines = Math.min(2, Math.max(1, Math.ceil(snippet.length / 42)));
+  return Math.max(TRACKED_CHANGE_GUTTER_CARD_MIN_HEIGHT_PX, 22 + lines * 11);
+}
+function assignGutterConnectorLanes(entries) {
+  if (entries.length <= 1) {
+    entries.forEach((entry) => {
+      entry.connectorLane = 0;
+    });
+    return;
+  }
+  const intervalPaddingPx = 3;
+  const laneEndY = Array.from(
+    { length: TRACKED_CHANGE_GUTTER_CONNECTOR_LANE_COUNT },
+    () => Number.NEGATIVE_INFINITY
+  );
+  const routedEntries = entries.map((entry, index) => {
+    const cardCenterY = entry.top + entry.heightPx / 2;
+    return {
+      entry,
+      index,
+      startY: Math.min(entry.anchorY, cardCenterY) - intervalPaddingPx,
+      endY: Math.max(entry.anchorY, cardCenterY) + intervalPaddingPx
+    };
+  }).sort((left, right) => {
+    const startDelta = left.startY - right.startY;
+    if (startDelta !== 0) {
+      return startDelta;
+    }
+    const endDelta = left.endY - right.endY;
+    if (endDelta !== 0) {
+      return endDelta;
+    }
+    return left.index - right.index;
+  });
+  routedEntries.forEach((route) => {
+    let laneIndex = laneEndY.findIndex(
+      (laneEnd) => route.startY > laneEnd + intervalPaddingPx
+    );
+    if (laneIndex < 0) {
+      laneIndex = laneEndY.reduce(
+        (bestLane, laneEnd, index) => laneEnd < laneEndY[bestLane] ? index : bestLane,
+        0
+      );
+    }
+    route.entry.connectorLane = laneIndex;
+    laneEndY[laneIndex] = Math.max(laneEndY[laneIndex], route.endY);
+  });
 }
 function layoutTrackedChangesForPage(annotations, anchorByChangeId, cardHeightsByChangeId, pageWidthPx, pageHeightPx) {
   if (annotations.length === 0) {
@@ -18268,14 +18466,25 @@ function layoutTrackedChangesForPage(annotations, anchorByChangeId, cardHeightsB
         Math.max(10, pageHeightPx - 10)
       ),
       top: 0,
-      heightPx
+      heightPx,
+      connectorLane: 0
     };
   });
-  withAnchors.sort((left, right) => left.anchorY - right.anchorY);
+  withAnchors.sort((left, right) => {
+    const yDelta = left.anchorY - right.anchorY;
+    if (Math.abs(yDelta) > 2) {
+      return yDelta;
+    }
+    const xDelta = left.anchorX - right.anchorX;
+    if (xDelta !== 0) {
+      return xDelta;
+    }
+    return left.annotation.id.localeCompare(right.annotation.id);
+  });
   const minTopPx = 8;
   let cursorTopPx = minTopPx;
   withAnchors.forEach((entry) => {
-    const desiredTop = entry.anchorY - Math.round(entry.heightPx / 2);
+    const desiredTop = entry.anchorY - 8;
     entry.top = Math.max(desiredTop, cursorTopPx);
     cursorTopPx = entry.top + entry.heightPx + TRACKED_CHANGE_GUTTER_CARD_GAP_PX;
   });
@@ -18290,6 +18499,7 @@ function layoutTrackedChangesForPage(annotations, anchorByChangeId, cardHeightsB
       shiftedCursorTopPx = entry.top + entry.heightPx + TRACKED_CHANGE_GUTTER_CARD_GAP_PX;
     });
   }
+  assignGutterConnectorLanes(withAnchors);
   return withAnchors;
 }
 function sameParagraphLocation(a, b) {
@@ -27458,6 +27668,9 @@ function DocxEditorViewer({
     };
     if (trackedChangesEnabled) {
       editor.trackedChanges.forEach((change) => {
+        if (!trackedChangeUsesGutterBalloon(change)) {
+          return;
+        }
         placeAnnotation({
           id: change.id,
           location: change.location,
@@ -27508,45 +27721,45 @@ function DocxEditorViewer({
       );
       return;
     }
-    const nextAnchorMaps = trackedChangesByPage.map((annotations, pageIndex) => {
-      const pageElement = pageElementsRef.current.get(pageIndex);
-      const anchorsByChangeId = /* @__PURE__ */ new Map();
-      if (!pageElement || annotations.length === 0) {
+    const nextAnchorMaps = trackedChangesByPage.map(
+      (annotations, pageIndex) => {
+        const pageElement = pageElementsRef.current.get(pageIndex);
+        const anchorsByChangeId = /* @__PURE__ */ new Map();
+        if (!pageElement || annotations.length === 0) {
+          return anchorsByChangeId;
+        }
+        const pageHeightPx = Math.max(1, pageElement.offsetHeight);
+        const pageWidthPx = Math.max(1, pageElement.offsetWidth);
+        annotations.forEach((annotation) => {
+          const anchorElement = findGutterAnnotationAnchorElementInPage(
+            pageElement,
+            annotation
+          );
+          if (!anchorElement) {
+            return;
+          }
+          const anchorRect = elementRectWithinContainer(
+            anchorElement,
+            pageElement
+          );
+          if (!anchorRect) {
+            return;
+          }
+          const anchorY = clampNumber(
+            Math.round(anchorRect.top + anchorRect.height / 2),
+            10,
+            Math.max(10, pageHeightPx - 10)
+          );
+          const anchorX = clampNumber(
+            Math.round(anchorRect.right),
+            10,
+            Math.max(10, pageWidthPx - 10)
+          );
+          anchorsByChangeId.set(annotation.id, { x: anchorX, y: anchorY });
+        });
         return anchorsByChangeId;
       }
-      const pageHeightPx = Math.max(1, pageElement.offsetHeight);
-      const pageWidthPx = Math.max(1, pageElement.offsetWidth);
-      annotations.forEach((annotation) => {
-        const anchorElement = findTrackedChangeAnchorElementInPage(
-          pageElement,
-          annotation.location
-        );
-        if (!anchorElement) {
-          return;
-        }
-        const anchorRect = elementRectWithinContainer(
-          anchorElement,
-          pageElement
-        );
-        if (!anchorRect) {
-          return;
-        }
-        const anchorY = clampNumber(
-          Math.round(anchorRect.top + anchorRect.height / 2),
-          10,
-          Math.max(10, pageHeightPx - 10)
-        );
-        const anchorX = clampNumber(
-          Math.round(
-            anchorRect.left + Math.min(24, Math.max(8, anchorRect.width * 0.2))
-          ),
-          10,
-          Math.max(10, pageWidthPx - 10)
-        );
-        anchorsByChangeId.set(annotation.id, { x: anchorX, y: anchorY });
-      });
-      return anchorsByChangeId;
-    });
+    );
     setTrackedChangeAnchorByPage(nextAnchorMaps);
   }, [
     trackedChangesByPage,
@@ -41397,6 +41610,7 @@ ${currentText.slice(end)}`;
           });
           const headerFooterBodyDimmed = pageHeaderFooterEditActive;
           const documentPageBackgroundColor = editor.model.metadata.documentBackgroundColor;
+          const resolvedPageSurfaceBackgroundColor = pageBackgroundColor ?? documentPageBackgroundColor ?? pageSurfaceBaseStyle.backgroundColor;
           const pageBorders = parseSectionPageBorders(
             pageInfo?.section.sectionPropertiesXml ?? editor.model.metadata.sectionPropertiesXml
           );
@@ -41419,7 +41633,7 @@ ${currentText.slice(end)}`;
             width: pageLayout.pageWidthPx,
             height: pageLayout.pageHeightPx,
             minHeight: pageLayout.pageHeightPx,
-            backgroundColor: pageBackgroundColor ?? documentPageBackgroundColor ?? pageSurfaceBaseStyle.backgroundColor,
+            backgroundColor: resolvedPageSurfaceBackgroundColor,
             position: "relative",
             ...pageMarginPaddingStyle(pageLayout.marginsPx)
           };
@@ -42521,6 +42735,7 @@ ${currentText.slice(end)}`;
                       top: 0,
                       width: TRACKED_CHANGE_GUTTER_WIDTH_PX,
                       height: pageLayout.pageHeightPx,
+                      backgroundColor: resolvedPageSurfaceBackgroundColor,
                       pointerEvents: "none",
                       overflow: "visible"
                     },
@@ -42551,14 +42766,14 @@ ${currentText.slice(end)}`;
                             overflow: "visible"
                           },
                           children: pageTrackedChanges.map((entry) => {
-                            const accentColor = entry.annotation.trackedChange ? trackedChangeAccentColor(
-                              entry.annotation.trackedChange.kind,
+                            const trackedChange = entry.annotation.trackedChange;
+                            const comment = entry.annotation.comment;
+                            const accentColor = trackedChange ? trackedChangeAccentColor(
+                              trackedChange.kind,
                               editor.documentTheme
-                            ) : commentAccentColor(editor.documentTheme);
-                            const cardCenterY = clampNumber(
-                              Math.round(entry.top + entry.heightPx / 2),
-                              8,
-                              Math.max(8, pageLayout.pageHeightPx - 8)
+                            ) : commentAccentColor(
+                              editor.documentTheme,
+                              comment?.commentId
                             );
                             const anchorY = clampNumber(
                               Math.round(entry.anchorY),
@@ -42570,48 +42785,58 @@ ${currentText.slice(end)}`;
                               8,
                               Math.max(8, pageLayout.pageWidthPx - 8)
                             );
-                            const cardLeadX = pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_CARD_LEFT_PX - 6;
-                            const bendX = clampNumber(
-                              Math.round((anchorX + cardLeadX) / 2),
-                              anchorX + 8,
-                              Math.max(anchorX + 8, cardLeadX - 8)
+                            const cardAttachX = pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_CARD_LEFT_PX;
+                            const maxConnectorLaneOffset = Math.max(
+                              TRACKED_CHANGE_GUTTER_BEND_OFFSET_PX,
+                              TRACKED_CHANGE_GUTTER_CARD_LEFT_PX - 6
+                            );
+                            const connectorLaneOffset = Math.min(
+                              TRACKED_CHANGE_GUTTER_BEND_OFFSET_PX + Math.max(0, entry.connectorLane) * TRACKED_CHANGE_GUTTER_CONNECTOR_LANE_GAP_PX,
+                              maxConnectorLaneOffset
+                            );
+                            const gutterBendX = pageLayout.pageWidthPx + connectorLaneOffset;
+                            const cardCenterY = clampNumber(
+                              Math.round(entry.top + entry.heightPx / 2),
+                              8,
+                              Math.max(8, pageLayout.pageHeightPx - 8)
+                            );
+                            const connectorPath = Math.abs(cardCenterY - anchorY) <= 2 ? `M ${anchorX} ${anchorY} H ${cardAttachX}` : `M ${anchorX} ${anchorY} H ${gutterBendX} V ${cardCenterY} H ${cardAttachX}`;
+                            const revisionBarX = clampNumber(
+                              Math.round(pageLayout.marginsPx.left - 20),
+                              8,
+                              Math.max(8, pageLayout.pageWidthPx - 8)
                             );
                             return /* @__PURE__ */ jsxs(
                               "g",
                               {
                                 children: [
+                                  trackedChange ? /* @__PURE__ */ jsx(
+                                    "line",
+                                    {
+                                      x1: revisionBarX,
+                                      y1: Math.max(8, anchorY - 16),
+                                      x2: revisionBarX,
+                                      y2: Math.min(
+                                        pageLayout.pageHeightPx - 8,
+                                        anchorY + 16
+                                      ),
+                                      stroke: editor.documentTheme === "dark" ? "#94a3b8" : "#9ca3af",
+                                      strokeWidth: 1.25,
+                                      strokeLinecap: "square"
+                                    }
+                                  ) : null,
                                   /* @__PURE__ */ jsx(
                                     "path",
                                     {
-                                      d: `M ${anchorX} ${anchorY} L ${bendX} ${anchorY} L ${cardLeadX} ${cardCenterY}`,
+                                      d: connectorPath,
                                       stroke: accentColor,
-                                      strokeWidth: 1.75,
-                                      strokeOpacity: 1,
-                                      strokeDasharray: "5 4",
+                                      strokeWidth: 1.15,
+                                      strokeOpacity: 0.78,
+                                      strokeDasharray: "2 3",
                                       strokeLinejoin: "round",
                                       strokeLinecap: "round",
                                       fill: "none"
                                     }
-                                  ),
-                                  /* @__PURE__ */ jsx(
-                                    "circle",
-                                    {
-                                      cx: anchorX,
-                                      cy: anchorY,
-                                      r: 2.2,
-                                      fill: accentColor,
-                                      stroke: editor.documentTheme === "dark" ? "#020617" : "#ffffff",
-                                      strokeWidth: 1
-                                    }
-                                  ),
-                                  /* @__PURE__ */ jsx(
-                                    "circle",
-                                    {
-                                      cx: cardLeadX,
-                                      cy: cardCenterY,
-                                      r: 1.8,
-                                      fill: accentColor
-                                    }
                                   )
                                 ]
                               },
@@ -42642,7 +42867,10 @@ ${currentText.slice(end)}`;
                         const accentColor = trackedChange ? trackedChangeAccentColor(
                           trackedChange.kind,
                           editor.documentTheme
-                        ) : commentAccentColor(editor.documentTheme);
+                        ) : commentAccentColor(
+                          editor.documentTheme,
+                          comment?.commentId
+                        );
                         const formattedDate = formatTrackedChangeDate(
                           trackedChange?.date ?? comment?.date
                         );
@@ -42669,15 +42897,15 @@ ${currentText.slice(end)}`;
                           {
                             style: {
                               ...cardStyle,
-                              padding: "6px 8px",
+                              padding: "4px 6px",
                               boxSizing: "border-box",
-                              borderLeft: `2px solid ${accentColor}`,
-                              borderTop: `1px solid ${editor.documentTheme === "dark" ? "rgba(148, 163, 184, 0.28)" : "rgba(15, 23, 42, 0.12)"}`,
-                              borderRight: `1px solid ${editor.documentTheme === "dark" ? "rgba(148, 163, 184, 0.28)" : "rgba(15, 23, 42, 0.12)"}`,
-                              borderBottom: `1px solid ${editor.documentTheme === "dark" ? "rgba(148, 163, 184, 0.28)" : "rgba(15, 23, 42, 0.12)"}`,
-                              backgroundColor: editor.documentTheme === "dark" ? "rgba(2, 6, 23, 0.96)" : "rgba(255, 255, 255, 0.96)",
+                              borderLeft: `1.5px solid ${accentColor}`,
+                              borderTop: `1px solid ${editor.documentTheme === "dark" ? "rgba(148, 163, 184, 0.18)" : "rgba(15, 23, 42, 0.08)"}`,
+                              borderRight: `1px solid ${editor.documentTheme === "dark" ? "rgba(148, 163, 184, 0.18)" : "rgba(15, 23, 42, 0.08)"}`,
+                              borderBottom: `1px solid ${editor.documentTheme === "dark" ? "rgba(148, 163, 184, 0.18)" : "rgba(15, 23, 42, 0.08)"}`,
+                              backgroundColor: editor.documentTheme === "dark" ? "rgba(15, 23, 42, 0.92)" : "rgba(255, 255, 255, 0.72)",
                               color: editor.documentTheme === "dark" ? "#f3f4f6" : "#111827",
-                              boxShadow: editor.documentTheme === "dark" ? "0 2px 6px rgba(2, 6, 23, 0.55)" : "0 1px 2px rgba(15, 23, 42, 0.14)"
+                              boxShadow: editor.documentTheme === "dark" ? "0 1px 2px rgba(2, 6, 23, 0.45)" : "0 1px 1px rgba(15, 23, 42, 0.08)"
                             },
                             children: [
                               /* @__PURE__ */ jsxs(
@@ -42695,9 +42923,9 @@ ${currentText.slice(end)}`;
                                       {
                                         style: {
                                           margin: 0,
-                                          fontSize: 12,
+                                          fontSize: 10,
                                           fontWeight: 700,
-                                          lineHeight: 1.25
+                                          lineHeight: 1.2
                                         },
                                         children: (trackedChange?.author ?? comment?.author)?.trim() || "Unknown author"
                                       }
@@ -42707,8 +42935,8 @@ ${currentText.slice(end)}`;
                                       {
                                         style: {
                                           margin: 0,
-                                          fontSize: 11,
-                                          lineHeight: 1.2,
+                                          fontSize: 9,
+                                          lineHeight: 1.15,
                                           color: editor.documentTheme === "dark" ? "#94a3b8" : "#6b7280",
                                           whiteSpace: "nowrap"
                                         },
@@ -42723,8 +42951,8 @@ ${currentText.slice(end)}`;
                                 {
                                   style: {
                                     margin: "2px 0 0",
-                                    fontSize: 11,
-                                    lineHeight: 1.3,
+                                    fontSize: 9,
+                                    lineHeight: 1.25,
                                     fontStyle: "italic",
                                     color: editor.documentTheme === "dark" ? "#94a3b8" : "#6b7280"
                                   },
@@ -42740,8 +42968,8 @@ ${currentText.slice(end)}`;
                                 {
                                   style: {
                                     margin: "2px 0 0",
-                                    fontSize: 12,
-                                    lineHeight: 1.35
+                                    fontSize: 10,
+                                    lineHeight: 1.25
                                   },
                                   children: [
                                     /* @__PURE__ */ jsxs("strong", { children: [
@@ -42778,6 +43006,10 @@ ${currentText.slice(end)}`;
                           "div",
                           {
                             "data-docx-gutter-annotation": trackedChange ? "tracked-change" : "comment",
+                            "data-docx-gutter-annotation-id": entry.annotation.id,
+                            "data-docx-gutter-anchor-x": Math.round(entry.anchorX),
+                            "data-docx-gutter-anchor-y": Math.round(entry.anchorY),
+                            "data-docx-gutter-connector-lane": entry.connectorLane,
                             ref: (element) => {
                               const elementKey = `${pageIndex}:${entry.annotation.id}`;
                               if (element) {