@extend-ai/react-docx 0.7.0 → 0.7.2

package/dist/index.cjs

@@ -549,7 +549,13 @@ async function defaultWasmSource() {
     const fs = await nodeFsPromises();
     return fs.readFile(wasmUrl);
   }
-  return wasmUrl;
+  const response = await fetch(wasmUrl);
+  if (!response.ok) {
+    throw new Error(
+      `react-docx: failed to load the bundled WebAssembly binary from ${wasmUrl.href} (${response.status} ${response.statusText}). If your bundler did not emit this asset, import @extend-ai/react-docx/docx_wasm_bg.wasm?url and pass it to setWasmSource() before importing a document.`
+    );
+  }
+  return response;
 }
 async function initWasm(source) {
   if (!initPromise) {
@@ -1185,7 +1191,7 @@ __export(index_exports, {
   defaultStarterModel: () => defaultStarterModel,
   duplicateParagraph: () => duplicateParagraph,
   getPart: () => getPart,
-  initWasm: () => initWasm,
+  initWasm: () => initWasm2,
   insertParagraph: () => insertParagraph,
   layoutDocument: () => layoutDocument,
   modelToDocumentXml: () => modelToDocumentXml,
@@ -1227,7 +1233,7 @@ __export(index_exports, {
   setParagraphHeading: () => setParagraphHeading,
   setRunColor: () => setRunColor,
   setRunHighlight: () => setRunHighlight,
-  setWasmSource: () => setWasmSource,
+  setWasmSource: () => setWasmSource2,
   splitParagraphChildrenAtTextOffsets: () => splitParagraphChildrenAtTextOffsets,
   toggleRunStyleFlag: () => toggleRunStyleFlag,
   updateParagraphText: () => updateParagraphText,
@@ -1479,6 +1485,60 @@ function layoutDocument(model, options = {}) {
 
 // src/docx-import.ts
 init_cjs_shims();
+
+// src/wasm-source.ts
+init_cjs_shims();
+init_src();
+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() {
   if (typeof DOMException !== "undefined") {
@@ -1497,7 +1557,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", importMetaUrl), {
@@ -1606,7 +1666,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);
@@ -1668,6 +1729,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;
@@ -1753,8 +1826,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;
@@ -1764,8 +1842,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,
@@ -4474,6 +4552,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;
 }
@@ -4729,6 +4827,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);
@@ -4768,7 +4892,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.");
   }
@@ -4783,6 +4907,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));
@@ -4795,7 +4934,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);
@@ -4807,6 +4946,14 @@ function renderDocxThumbnailSnapshotSurface(params) {
           hairlineSourcePx
         );
         break;
+      case "image":
+        drawDirectThumbnailImage(
+          context,
+          element,
+          decodedImagesBySrc.get(element.src),
+          hairlineSourcePx
+        );
+        break;
       case "table":
         drawDirectThumbnailTable(context, element, hairlineSourcePx);
         break;
@@ -5687,10 +5834,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") {
@@ -14103,9 +14251,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"
@@ -15730,11 +15879,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) {
@@ -15768,11 +15928,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__ */ (0, import_jsx_runtime.jsx)("span", { style, children: text }, keySeed)
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...spanAttributes, style, children: text }, keySeed)
       );
       trackTextAdvance(text, measureStyle);
       return;
@@ -15788,6 +15948,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "span",
             {
+              ...spanAttributes,
               style: isLastSegment ? {
                 ...style,
                 display: "inline-block",
@@ -15938,6 +16099,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("#");
@@ -15945,6 +16107,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "a",
             {
+              ...annotationAttributes2,
               href: linkHref,
               target: isInternalLink ? void 0 : "_blank",
               rel: isInternalLink ? void 0 : "noreferrer noopener",
@@ -15981,12 +16144,20 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
       };
       if (text === "	" && !useTabLeaderLayout && !useAnchoredTabLayout) {
         target.push(
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: tabTextStyle(child.style, trackedStyle), children: "\xA0" }, key)
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
+            {
+              ...annotationAttributes2,
+              style: tabTextStyle(child.style, trackedStyle),
+              children: "\xA0"
+            },
+            key
+          )
         );
         return;
       }
       target.push(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: trackedStyle, children: text }, key)
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...annotationAttributes2, style: trackedStyle, children: text }, key)
       );
       trackTextAdvance(text, child.style);
       return;
@@ -16055,7 +16226,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(
@@ -16241,6 +16412,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
       ),
       ...currentCommentHighlightStyle()
     };
+    const annotationAttributes = currentAnnotationAttributes(trackedInlineChange);
     const noteLabel = noteMarkerLabel(
       child.noteReference,
       safeNoteMarkerIndexes.footnote,
@@ -16251,6 +16423,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "span",
           {
+            ...annotationAttributes,
             style: {
               ...textStyle,
               verticalAlign: "super",
@@ -16266,7 +16439,15 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
     }
     if ((textOverride ?? child.text) === "	" && !useTabLeaderLayout && !useAnchoredTabLayout) {
       target.push(
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: tabTextStyle(child.style, textStyle), children: "\xA0" }, key)
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            ...annotationAttributes,
+            style: tabTextStyle(child.style, textStyle),
+            children: "\xA0"
+          },
+          key
+        )
       );
       return;
     }
@@ -16277,6 +16458,7 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "a",
           {
+            ...annotationAttributes,
             href: linkHref,
             target: isInternalLink ? void 0 : "_blank",
             rel: isInternalLink ? void 0 : "noreferrer noopener",
@@ -16309,7 +16491,8 @@ function renderParagraphRuns(paragraph, keyPrefix, documentTheme = "light", numb
       key,
       textOverride ?? child.text,
       textStyle,
-      child.style
+      child.style,
+      annotationAttributes
     );
   };
   const anchoredTabZoneStyle = {
@@ -19020,6 +19203,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,
@@ -19198,13 +19382,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) {
@@ -19226,16 +19439,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) {
@@ -19254,6 +19467,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];
@@ -19334,10 +19550,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) {
@@ -19377,11 +19675,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;
   });
@@ -24263,7 +24571,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,
       {
@@ -24354,13 +24662,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;
@@ -24459,6 +24783,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,
@@ -24471,6 +24813,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 {
@@ -24917,7 +25262,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,
@@ -28527,6 +28872,9 @@ function DocxEditorViewer({
     };
     if (trackedChangesEnabled) {
       editor.trackedChanges.forEach((change) => {
+        if (!trackedChangeUsesGutterBalloon(change)) {
+          return;
+        }
         placeAnnotation({
           id: change.id,
           location: change.location,
@@ -28577,45 +28925,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,
@@ -42466,6 +42814,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
           );
@@ -42488,7 +42837,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)
           };
@@ -43590,6 +43939,7 @@ ${currentText.slice(end)}`;
                       top: 0,
                       width: TRACKED_CHANGE_GUTTER_WIDTH_PX,
                       height: pageLayout.pageHeightPx,
+                      backgroundColor: resolvedPageSurfaceBackgroundColor,
                       pointerEvents: "none",
                       overflow: "visible"
                     },
@@ -43620,14 +43970,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),
@@ -43639,48 +43989,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__ */ (0, import_jsx_runtime.jsxs)(
                               "g",
                               {
                                 children: [
+                                  trackedChange ? /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
-                                    "circle",
-                                    {
-                                      cx: anchorX,
-                                      cy: anchorY,
-                                      r: 2.2,
-                                      fill: accentColor,
-                                      stroke: editor.documentTheme === "dark" ? "#020617" : "#ffffff",
-                                      strokeWidth: 1
-                                    }
-                                  ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                                    "circle",
-                                    {
-                                      cx: cardLeadX,
-                                      cy: cardCenterY,
-                                      r: 1.8,
-                                      fill: accentColor
-                                    }
                                   )
                                 ]
                               },
@@ -43711,7 +44063,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
                         );
@@ -43738,15 +44093,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__ */ (0, import_jsx_runtime.jsxs)(
@@ -43764,9 +44119,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"
                                       }
@@ -43776,8 +44131,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"
                                         },
@@ -43792,8 +44147,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"
                                   },
@@ -43809,8 +44164,8 @@ ${currentText.slice(end)}`;
                                 {
                                   style: {
                                     margin: "2px 0 0",
-                                    fontSize: 12,
-                                    lineHeight: 1.35
+                                    fontSize: 10,
+                                    lineHeight: 1.25
                                   },
                                   children: [
                                     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("strong", { children: [
@@ -43847,6 +44202,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) {
@@ -45732,7 +46090,6 @@ function buildLayoutSnapshot(model, options = {}) {
 }
 
 // src/index.tsx
-init_src();
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var HIGHLIGHT_TO_CSS2 = {
   yellow: "#fff59d",