@extend-ai/react-docx 0.7.0 → 0.7.2

package/dist/index.js

@@ -4,20 +4,20 @@ import {
   packageToArrayBuffer,
   parseDocx,
   withPart
-} from "./chunk-QOXSE6WY.js";
+} from "./chunk-XBI2PYTU.js";
 import {
   buildDocModel,
   buildDocModelFromBytes,
   cloneDocModel,
   normalizeDocModel
-} from "./chunk-P3B3Q7Y6.js";
+} from "./chunk-P3MKA55V.js";
 import {
   initWasm,
   mapsToWasmPackage,
   setWasmSource,
   wasmModelToDocumentXml,
   wasmSerializeDocx
-} from "./chunk-2SXGXGWO.js";
+} from "./chunk-WKBPLHUA.js";
 
 // src/index.tsx
 import * as React2 from "react";
@@ -244,6 +244,56 @@ function layoutDocument(model, options = {}) {
   return pages;
 }
 
+// src/wasm-source.ts
+var hasConfiguredWasmSource = false;
+var configuredWorkerWasmSource;
+function bufferSourceToArrayBuffer(source) {
+  if (source instanceof ArrayBuffer) {
+    return source.slice(0);
+  }
+  const bytes = new Uint8Array(source.buffer, source.byteOffset, source.byteLength);
+  const copy = new Uint8Array(bytes);
+  return copy.buffer;
+}
+function sourceToWorkerSource(source) {
+  if (typeof source === "string") {
+    return source;
+  }
+  if (typeof URL !== "undefined" && source instanceof URL) {
+    return source.href;
+  }
+  if (source instanceof ArrayBuffer || ArrayBuffer.isView(source)) {
+    return bufferSourceToArrayBuffer(source);
+  }
+  if (typeof WebAssembly !== "undefined" && source instanceof WebAssembly.Module) {
+    return source;
+  }
+  if (typeof Request !== "undefined" && source instanceof Request) {
+    return source.url;
+  }
+  return void 0;
+}
+function rememberWorkerWasmSource(source) {
+  hasConfiguredWasmSource = true;
+  configuredWorkerWasmSource = sourceToWorkerSource(source);
+}
+function setWasmSource2(source) {
+  setWasmSource(source);
+  rememberWorkerWasmSource(source);
+}
+function initWasm2(source) {
+  if (source !== void 0) {
+    rememberWorkerWasmSource(source);
+  }
+  return initWasm(source);
+}
+function canUseConfiguredWasmSourceInWorker() {
+  return !hasConfiguredWasmSource || configuredWorkerWasmSource !== void 0;
+}
+function getConfiguredWorkerWasmSource() {
+  return configuredWorkerWasmSource;
+}
+
 // src/docx-import.ts
 var nextImportWorkerRequestId = 1;
 function createAbortError() {
@@ -263,7 +313,7 @@ function errorFromWorkerResponse(response) {
   return error;
 }
 function canUseDocxImportWorker(options) {
-  return options.useWorker !== false && typeof Worker !== "undefined";
+  return options.useWorker !== false && typeof Worker !== "undefined" && canUseConfiguredWasmSourceInWorker();
 }
 function createDocxImportWorker() {
   return new Worker(new URL("./docx-import-worker.js", import.meta.url), {
@@ -277,8 +327,8 @@ async function importDocxOnMainThread(buffer, signal) {
   }
   const startedAt = performanceNow();
   const [{ parseDocx: parseDocx2 }, { buildDocModel: buildDocModel2 }] = await Promise.all([
-    import("./src-PJYTN6DB.js"),
-    import("./src-NDPFDRVM.js")
+    import("./src-2FP7IUE6.js"),
+    import("./src-VN4V5N3K.js")
   ]);
   const pkg = await parseDocx2(buffer);
   const parsedAt = performanceNow();
@@ -372,7 +422,8 @@ async function importDocxBuffer(buffer, options = {}) {
       const request = {
         id: requestId,
         type: "import-docx",
-        buffer
+        buffer,
+        wasmSource: getConfiguredWorkerWasmSource()
       };
       const transfer = options.transferBuffer ? [buffer] : [];
       worker.postMessage(request, transfer);
@@ -433,6 +484,18 @@ function readStringAttribute(tagXml, attribute) {
   }
   return tagXml.match(new RegExp(`${attribute}="([^"]+)"`, "i"))?.[1];
 }
+function resolvePageSizeForOrientation(params) {
+  const normalizedOrientation = params.orientation?.trim().toLowerCase();
+  const widthPx = Math.max(1, params.widthPx);
+  const heightPx = Math.max(1, params.heightPx);
+  if (normalizedOrientation === "landscape" && widthPx < heightPx) {
+    return { widthPx: heightPx, heightPx: widthPx };
+  }
+  if (normalizedOrientation === "portrait" && widthPx > heightPx) {
+    return { widthPx: heightPx, heightPx: widthPx };
+  }
+  return { widthPx, heightPx };
+}
 function normalizeHexColor(value) {
   if (!value) {
     return void 0;
@@ -518,8 +581,13 @@ function parseSectionLayout(sectionPropertiesXml) {
   const pageSizeTag = sectionPropertiesXml.match(/<w:pgSz\b[^>]*>/i)?.[0];
   const pageMarginTag = sectionPropertiesXml.match(/<w:pgMar\b[^>]*>/i)?.[0];
   const docGridTag = sectionPropertiesXml.match(/<w:docGrid\b[^>]*\/?>/i)?.[0];
-  const pageWidthPx = twipsToPixels(readTwipsAttribute(pageSizeTag, "w:w")) ?? DEFAULT_DOCUMENT_LAYOUT.pageWidthPx;
-  const pageHeightPx = twipsToPixels(readTwipsAttribute(pageSizeTag, "w:h")) ?? DEFAULT_DOCUMENT_LAYOUT.pageHeightPx;
+  const rawPageWidthPx = twipsToPixels(readTwipsAttribute(pageSizeTag, "w:w")) ?? DEFAULT_DOCUMENT_LAYOUT.pageWidthPx;
+  const rawPageHeightPx = twipsToPixels(readTwipsAttribute(pageSizeTag, "w:h")) ?? DEFAULT_DOCUMENT_LAYOUT.pageHeightPx;
+  const pageSize = resolvePageSizeForOrientation({
+    widthPx: rawPageWidthPx,
+    heightPx: rawPageHeightPx,
+    orientation: readStringAttribute(pageSizeTag, "w:orient")
+  });
   const topMarginPx = twipsToPixels(readTwipsAttribute(pageMarginTag, "w:top")) ?? DEFAULT_DOCUMENT_LAYOUT.marginsPx.top;
   const rightMarginPx = twipsToPixels(readTwipsAttribute(pageMarginTag, "w:right")) ?? DEFAULT_DOCUMENT_LAYOUT.marginsPx.right;
   const bottomMarginPx = twipsToPixels(readTwipsAttribute(pageMarginTag, "w:bottom")) ?? DEFAULT_DOCUMENT_LAYOUT.marginsPx.bottom;
@@ -529,8 +597,8 @@ function parseSectionLayout(sectionPropertiesXml) {
   const docGridType = readStringAttribute(docGridTag, "w:type")?.toLowerCase();
   const docGridLinePitchPx = docGridType === "lines" || docGridType === "linesandchars" || docGridType === "snaptochars" ? twipsToPixels(readTwipsAttribute(docGridTag, "w:linePitch")) ?? DEFAULT_DOCUMENT_LAYOUT.docGridLinePitchPx : DEFAULT_DOCUMENT_LAYOUT.docGridLinePitchPx;
   return {
-    pageWidthPx,
-    pageHeightPx,
+    pageWidthPx: pageSize.widthPx,
+    pageHeightPx: pageSize.heightPx,
     marginsPx: {
       top: topMarginPx,
       right: rightMarginPx,
@@ -1747,7 +1815,7 @@ async function serializeDocModel(model, basePackage) {
     model,
     basePackage ? mapsToWasmPackage(basePackage) : void 0
   );
-  const { parseDocx: parseDocx2 } = await import("./src-PJYTN6DB.js");
+  const { parseDocx: parseDocx2 } = await import("./src-2FP7IUE6.js");
   return parseDocx2(bytes);
 }
 async function serializeDocx(model, basePackage) {
@@ -3231,6 +3299,26 @@ function getDownscaledThumbnailImageDataUri(src) {
   downscaledThumbnailImageCache.set(src, pending);
   return pending;
 }
+var THUMBNAIL_DECODED_IMAGE_CACHE_MAX_ENTRIES = 48;
+var decodedThumbnailImageCache = /* @__PURE__ */ new Map();
+function getDecodedThumbnailImage(src) {
+  const cached = decodedThumbnailImageCache.get(src);
+  if (cached) {
+    decodedThumbnailImageCache.delete(src);
+    decodedThumbnailImageCache.set(src, cached);
+    return cached;
+  }
+  const pending = loadThumbnailImage(src).catch(() => void 0);
+  decodedThumbnailImageCache.set(src, pending);
+  while (decodedThumbnailImageCache.size > THUMBNAIL_DECODED_IMAGE_CACHE_MAX_ENTRIES) {
+    const oldestKey = decodedThumbnailImageCache.keys().next().value;
+    if (oldestKey === void 0) {
+      break;
+    }
+    decodedThumbnailImageCache.delete(oldestKey);
+  }
+  return pending;
+}
 function directThumbnailPositivePx(value, fallback = 1) {
   return Number.isFinite(value) && value > 0 ? Math.max(1, Number(value)) : fallback;
 }
@@ -3486,6 +3574,32 @@ function drawDirectThumbnailImagePlaceholder(context, image, hairlineSourcePx) {
   context.lineWidth = hairlineSourcePx;
   context.strokeRect(xPx, yPx, widthPx, heightPx);
 }
+function drawDirectThumbnailImage(context, image, decoded, hairlineSourcePx) {
+  const xPx = Math.round(image.xPx);
+  const yPx = Math.round(image.yPx);
+  const widthPx = Math.max(1, Math.round(image.widthPx));
+  const heightPx = Math.max(1, Math.round(image.heightPx));
+  if (decoded && decoded.naturalWidth > 0 && decoded.naturalHeight > 0) {
+    try {
+      context.drawImage(decoded, xPx, yPx, widthPx, heightPx);
+      return;
+    } catch {
+    }
+  }
+  setCanvasFillStyle(
+    context,
+    image.backgroundColor,
+    THUMBNAIL_DIRECT_IMAGE_BACKGROUND
+  );
+  context.fillRect(xPx, yPx, widthPx, heightPx);
+  setCanvasStrokeStyle(
+    context,
+    image.borderColor,
+    THUMBNAIL_DIRECT_TABLE_BORDER_COLOR
+  );
+  context.lineWidth = hairlineSourcePx;
+  context.strokeRect(xPx, yPx, widthPx, heightPx);
+}
 function drawDirectThumbnailTable(context, table, hairlineSourcePx) {
   const tableXPx = Math.round(table.xPx);
   const tableYPx = Math.round(table.yPx);
@@ -3525,7 +3639,7 @@ function drawDirectThumbnailTable(context, table, hairlineSourcePx) {
   });
   context.restore();
 }
-function renderDocxThumbnailSnapshotSurface(params) {
+async function renderDocxThumbnailSnapshotSurface(params) {
   if (typeof document === "undefined") {
     throw new Error("DOCX thumbnails require a browser environment.");
   }
@@ -3540,6 +3654,21 @@ function renderDocxThumbnailSnapshotSurface(params) {
   if (!context) {
     throw new Error("2D canvas context is unavailable for DOCX thumbnails.");
   }
+  const elements = params.snapshot.elements.slice(0, THUMBNAIL_DIRECT_MAX_ELEMENTS);
+  const decodedImagesBySrc = /* @__PURE__ */ new Map();
+  const imageSrcs = /* @__PURE__ */ new Set();
+  for (const element of elements) {
+    if (element.kind === "image" && element.src) {
+      imageSrcs.add(element.src);
+    }
+  }
+  if (imageSrcs.size > 0) {
+    await Promise.all(
+      Array.from(imageSrcs, async (src) => {
+        decodedImagesBySrc.set(src, await getDecodedThumbnailImage(src));
+      })
+    );
+  }
   const scaleX = pixelWidthPx / sourceWidthPx;
   const scaleY = pixelHeightPx / sourceHeightPx;
   const hairlineSourcePx = Math.max(0.75, 1 / Math.max(scaleX, scaleY));
@@ -3552,7 +3681,7 @@ function renderDocxThumbnailSnapshotSurface(params) {
     "#ffffff"
   );
   context.fillRect(0, 0, sourceWidthPx, sourceHeightPx);
-  params.snapshot.elements.slice(0, THUMBNAIL_DIRECT_MAX_ELEMENTS).forEach((element) => {
+  elements.forEach((element) => {
     switch (element.kind) {
       case "paragraph":
         drawDirectThumbnailParagraph(context, element);
@@ -3564,6 +3693,14 @@ function renderDocxThumbnailSnapshotSurface(params) {
           hairlineSourcePx
         );
         break;
+      case "image":
+        drawDirectThumbnailImage(
+          context,
+          element,
+          decodedImagesBySrc.get(element.src),
+          hairlineSourcePx
+        );
+        break;
       case "table":
         drawDirectThumbnailTable(context, element, hairlineSourcePx);
         break;
@@ -4444,10 +4581,11 @@ 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 = 14;
+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 INITIAL_PAGINATION_STABILITY_IDLE_MS = 240;
 function scheduleDomWrite(callback) {
   if (typeof window !== "undefined" && typeof window.requestAnimationFrame === "function") {
@@ -12860,9 +12998,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"
@@ -14487,11 +14626,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) {
@@ -14525,11 +14675,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;
@@ -14545,6 +14695,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
           /* @__PURE__ */ jsx(
             "span",
             {
+              ...spanAttributes,
               style: isLastSegment ? {
                 ...style,
                 display: "inline-block",
@@ -14695,6 +14846,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("#");
@@ -14702,6 +14854,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",
@@ -14738,12 +14891,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;
@@ -14812,7 +14973,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(
@@ -14998,6 +15159,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
       ),
       ...currentCommentHighlightStyle()
     };
+    const annotationAttributes = currentAnnotationAttributes(trackedInlineChange);
     const noteLabel = noteMarkerLabel(
       child.noteReference,
       safeNoteMarkerIndexes.footnote,
@@ -15008,6 +15170,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
         /* @__PURE__ */ jsx(
           "span",
           {
+            ...annotationAttributes,
             style: {
               ...textStyle,
               verticalAlign: "super",
@@ -15023,7 +15186,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;
     }
@@ -15034,6 +15205,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",
@@ -15066,7 +15238,8 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
       key,
       textOverride ?? child.text,
       textStyle,
-      child.style
+      child.style,
+      annotationAttributes
     );
   };
   const anchoredTabZoneStyle = {
@@ -17777,6 +17950,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,
@@ -17955,13 +18129,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) {
@@ -17983,16 +18186,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) {
@@ -18011,6 +18214,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];
@@ -18091,10 +18297,92 @@ 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 layoutTrackedChangesForPage(annotations, anchorByChangeId, cardHeightsByChangeId, pageWidthPx, pageHeightPx) {
   if (annotations.length === 0) {
@@ -18134,11 +18422,21 @@ function layoutTrackedChangesForPage(annotations, anchorByChangeId, cardHeightsB
       heightPx
     };
   });
-  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;
   });
@@ -23020,7 +23318,7 @@ function docxThumbnailTextRunsFromParagraph(paragraph, documentTheme, maxChars =
       return;
     }
     const style = child.type === "text" || child.type === "form-field" ? child.style : void 0;
-    const text = child.type === "text" ? child.text : child.type === "form-field" ? formFieldDisplayValue2(child) : child.type === "image" ? child.alt || "[image]" : "";
+    const text = child.type === "text" ? child.text : child.type === "form-field" ? formFieldDisplayValue2(child) : "";
     appendDocxThumbnailTextRun(
       runs,
       {
@@ -23111,13 +23409,29 @@ function buildDocxThumbnailParagraphElements(params) {
         (widthPx - 4) / imageWidthPx,
         (bodyHeightPx - 4) / imageHeightPx
       );
-      elements.push({
-        kind: "image-placeholder",
-        xPx: xPx + 2,
-        yPx: bodyYPx + 2,
-        widthPx: Math.max(12, imageWidthPx * scale),
-        heightPx: Math.max(12, imageHeightPx * scale)
-      });
+      const elementXPx = xPx + 2;
+      const elementYPx = bodyYPx + 2;
+      const elementWidthPx = Math.max(12, imageWidthPx * scale);
+      const elementHeightPx = Math.max(12, imageHeightPx * scale);
+      const renderableSrc = resolveRenderableImageSource(imageRun);
+      if (renderableSrc) {
+        elements.push({
+          kind: "image",
+          xPx: elementXPx,
+          yPx: elementYPx,
+          widthPx: elementWidthPx,
+          heightPx: elementHeightPx,
+          src: renderableSrc
+        });
+      } else {
+        elements.push({
+          kind: "image-placeholder",
+          xPx: elementXPx,
+          yPx: elementYPx,
+          widthPx: elementWidthPx,
+          heightPx: elementHeightPx
+        });
+      }
     });
   }
   return elements;
@@ -23216,6 +23530,24 @@ function buildDocxThumbnailTableElement(params) {
     cells
   };
 }
+function docxThumbnailNodeRequiresDomRaster(node) {
+  if (!node) {
+    return false;
+  }
+  if (node.type === "paragraph") {
+    return node.children.some((child) => child.type === "image");
+  }
+  return node.rows.some(
+    (row) => row.cells.some(
+      (cell) => cell.nodes.some((cellNode) => docxThumbnailNodeRequiresDomRaster(cellNode))
+    )
+  );
+}
+function docxThumbnailPageRequiresDomRaster(model, pageSegments) {
+  return pageSegments.some(
+    (segment) => docxThumbnailNodeRequiresDomRaster(model.nodes[segment.nodeIndex])
+  );
+}
 function buildDocxPageThumbnailRenderSnapshotEntries(params) {
   const {
     model,
@@ -23228,6 +23560,9 @@ function buildDocxPageThumbnailRenderSnapshotEntries(params) {
     numberingDefinitions
   } = params;
   return pageNodeSegmentsByPage.map((pageSegments, pageIndex) => {
+    if (docxThumbnailPageRequiresDomRaster(model, pageSegments)) {
+      return void 0;
+    }
     const key = `${contentKeysByPage[pageIndex] ?? ""}|theme:${documentTheme}`;
     let cachedSnapshot;
     return {
@@ -23674,7 +24009,7 @@ function useDocxPageThumbnails(editor, options = {}) {
       if (!surface) {
         const thumbnailSnapshot = thumbnailSnapshotEntry?.getSnapshot();
         if (thumbnailSnapshot) {
-          surface = renderDocxThumbnailSnapshotSurface({
+          surface = await renderDocxThumbnailSnapshotSurface({
             snapshot: thumbnailSnapshot,
             widthPx: resolution.widthPx,
             heightPx: resolution.heightPx,
@@ -27284,6 +27619,9 @@ function DocxEditorViewer({
     };
     if (trackedChangesEnabled) {
       editor.trackedChanges.forEach((change) => {
+        if (!trackedChangeUsesGutterBalloon(change)) {
+          return;
+        }
         placeAnnotation({
           id: change.id,
           location: change.location,
@@ -27334,45 +27672,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,
@@ -41223,6 +41561,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
           );
@@ -41245,7 +41584,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)
           };
@@ -42347,6 +42686,7 @@ ${currentText.slice(end)}`;
                       top: 0,
                       width: TRACKED_CHANGE_GUTTER_WIDTH_PX,
                       height: pageLayout.pageHeightPx,
+                      backgroundColor: resolvedPageSurfaceBackgroundColor,
                       pointerEvents: "none",
                       overflow: "visible"
                     },
@@ -42377,14 +42717,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),
@@ -42396,48 +42736,50 @@ ${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 gutterBendX = pageLayout.pageWidthPx + TRACKED_CHANGE_GUTTER_BEND_OFFSET_PX;
+                            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
-                                    }
                                   )
                                 ]
                               },
@@ -42468,7 +42810,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
                         );
@@ -42495,15 +42840,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(
@@ -42521,9 +42866,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"
                                       }
@@ -42533,8 +42878,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"
                                         },
@@ -42549,8 +42894,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"
                                   },
@@ -42566,8 +42911,8 @@ ${currentText.slice(end)}`;
                                 {
                                   style: {
                                     margin: "2px 0 0",
-                                    fontSize: 12,
-                                    lineHeight: 1.35
+                                    fontSize: 10,
+                                    lineHeight: 1.25
                                   },
                                   children: [
                                     /* @__PURE__ */ jsxs("strong", { children: [
@@ -42604,6 +42949,9 @@ ${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),
                             ref: (element) => {
                               const elementKey = `${pageIndex}:${entry.annotation.id}`;
                               if (element) {
@@ -44857,7 +45205,7 @@ export {
   defaultStarterModel,
   duplicateParagraph,
   getPart,
-  initWasm,
+  initWasm2 as initWasm,
   insertParagraph,
   layoutDocument,
   modelToDocumentXml,
@@ -44899,7 +45247,7 @@ export {
   setParagraphHeading,
   setRunColor,
   setRunHighlight,
-  setWasmSource,
+  setWasmSource2 as setWasmSource,
   splitParagraphChildrenAtTextOffsets,
   toggleRunStyleFlag,
   updateParagraphText,