@zerohive/hive-viewer 2.0.1 → 2.0.3

package/dist/index.cjs

@@ -65,15 +65,18 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/DocumentViewer.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/editors/RichTextEditor.tsx
 var import_mammoth = __toESM(require("mammoth"), 1);
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_markdown_it = __toESM(require("markdown-it"), 1);
 
 // src/components/SignatureOverlay.tsx
 var import_lucide_react = require("lucide-react");
+var import_react2 = require("react");
+
+// src/components/RenderableSignatureImage.tsx
 var import_react = require("react");
 
 // src/utils/signature.ts
@@ -155,8 +158,267 @@ function normalizeSignaturePlacement(placement) {
   };
 }
 
-// src/components/SignatureOverlay.tsx
+// src/utils/signatureImage.ts
+var processedSignatureCache = /* @__PURE__ */ new Map();
+function ensureSignatureSource(source) {
+  const trimmedSource = source.trim();
+  if (trimmedSource.startsWith("data:") || trimmedSource.startsWith("blob:") || trimmedSource.startsWith("http:") || trimmedSource.startsWith("https:")) {
+    return trimmedSource;
+  }
+  if (trimmedSource.startsWith("//") && typeof window !== "undefined") {
+    return `${window.location.protocol}${trimmedSource}`;
+  }
+  if (typeof window !== "undefined" && (trimmedSource.startsWith("/") || trimmedSource.startsWith("./") || trimmedSource.startsWith("../"))) {
+    return new URL(trimmedSource, window.location.origin).toString();
+  }
+  if (trimmedSource.startsWith("<svg") || trimmedSource.startsWith("<?xml") && trimmedSource.includes("<svg")) {
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(trimmedSource)}`;
+  }
+  return `data:image/png;base64,${trimmedSource}`;
+}
+function createCanvas(width, height) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.max(1, Math.round(width));
+  canvas.height = Math.max(1, Math.round(height));
+  return canvas;
+}
+async function loadSignatureImage(source) {
+  const image = new Image();
+  image.crossOrigin = "anonymous";
+  image.decoding = "async";
+  await new Promise((resolve, reject) => {
+    image.onload = () => resolve();
+    image.onerror = () => reject(new Error("Unable to load signature image."));
+    image.src = source;
+  });
+  if ("decode" in image) {
+    try {
+      await image.decode();
+    } catch {
+    }
+  }
+  return image;
+}
+function colorDistance(leftRed, leftGreen, leftBlue, rightRed, rightGreen, rightBlue) {
+  const deltaRed = leftRed - rightRed;
+  const deltaGreen = leftGreen - rightGreen;
+  const deltaBlue = leftBlue - rightBlue;
+  return Math.sqrt(
+    deltaRed * deltaRed + deltaGreen * deltaGreen + deltaBlue * deltaBlue
+  );
+}
+function hasMeaningfulTransparency(pixels) {
+  let translucentPixels = 0;
+  const totalPixels = pixels.length / 4;
+  for (let index = 3; index < pixels.length; index += 4) {
+    if (pixels[index] < 250) {
+      translucentPixels += 1;
+    }
+  }
+  return translucentPixels > Math.max(12, totalPixels * 4e-3);
+}
+function detectUniformBackground(pixels, width, height) {
+  const sampleRadius = Math.max(2, Math.min(12, Math.floor(Math.min(width, height) / 12)));
+  const sampleOrigins = [
+    [0, 0],
+    [Math.max(0, width - sampleRadius), 0],
+    [0, Math.max(0, height - sampleRadius)],
+    [Math.max(0, width - sampleRadius), Math.max(0, height - sampleRadius)]
+  ];
+  const samples = [];
+  for (const [startX, startY] of sampleOrigins) {
+    let red = 0;
+    let green = 0;
+    let blue = 0;
+    let count = 0;
+    for (let y = startY; y < Math.min(height, startY + sampleRadius); y += 1) {
+      for (let x = startX; x < Math.min(width, startX + sampleRadius); x += 1) {
+        const offset = (y * width + x) * 4;
+        const alpha = pixels[offset + 3];
+        if (alpha < 250) {
+          continue;
+        }
+        red += pixels[offset];
+        green += pixels[offset + 1];
+        blue += pixels[offset + 2];
+        count += 1;
+      }
+    }
+    if (count === 0) {
+      return null;
+    }
+    samples.push([
+      Math.round(red / count),
+      Math.round(green / count),
+      Math.round(blue / count)
+    ]);
+  }
+  if (samples.length === 0) {
+    return null;
+  }
+  const average = samples.reduce(
+    (accumulator, sample) => [
+      accumulator[0] + sample[0],
+      accumulator[1] + sample[1],
+      accumulator[2] + sample[2]
+    ],
+    [0, 0, 0]
+  );
+  const background = [
+    Math.round(average[0] / samples.length),
+    Math.round(average[1] / samples.length),
+    Math.round(average[2] / samples.length)
+  ];
+  const maxDistance = samples.reduce((highest, sample) => {
+    const distance = colorDistance(
+      sample[0],
+      sample[1],
+      sample[2],
+      background[0],
+      background[1],
+      background[2]
+    );
+    return Math.max(highest, distance);
+  }, 0);
+  return maxDistance <= 26 ? background : null;
+}
+function createTintedSignatureFromAlpha(pixels, width, height, inkColor) {
+  const canvas = createCanvas(width, height);
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return null;
+  }
+  const output = context.createImageData(width, height);
+  for (let offset = 0; offset < pixels.length; offset += 4) {
+    output.data[offset] = inkColor[0];
+    output.data[offset + 1] = inkColor[1];
+    output.data[offset + 2] = inkColor[2];
+    output.data[offset + 3] = pixels[offset + 3];
+  }
+  context.putImageData(output, 0, 0);
+  return canvas;
+}
+function createTintedSignatureFromSolidBackground(pixels, width, height, background, inkColor) {
+  const canvas = createCanvas(width, height);
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return null;
+  }
+  const output = context.createImageData(width, height);
+  let foregroundPixels = 0;
+  const totalPixels = width * height;
+  for (let offset = 0; offset < pixels.length; offset += 4) {
+    const alpha = pixels[offset + 3] / 255;
+    const distance = colorDistance(
+      pixels[offset],
+      pixels[offset + 1],
+      pixels[offset + 2],
+      background[0],
+      background[1],
+      background[2]
+    );
+    const normalizedStrength = Math.max(0, Math.min(1, (distance - 14) / 120));
+    const outputAlpha = Math.round(normalizedStrength * alpha * 255);
+    output.data[offset] = inkColor[0];
+    output.data[offset + 1] = inkColor[1];
+    output.data[offset + 2] = inkColor[2];
+    output.data[offset + 3] = outputAlpha;
+    if (outputAlpha > 10) {
+      foregroundPixels += 1;
+    }
+  }
+  if (foregroundPixels < Math.max(24, totalPixels * 15e-4) || foregroundPixels > totalPixels * 0.42) {
+    return null;
+  }
+  context.putImageData(output, 0, 0);
+  return canvas;
+}
+function parseInkColor(inkColor) {
+  const hex = SIGNATURE_INK_COLOR_VALUES[inkColor];
+  return [
+    Number.parseInt(hex.slice(1, 3), 16),
+    Number.parseInt(hex.slice(3, 5), 16),
+    Number.parseInt(hex.slice(5, 7), 16)
+  ];
+}
+async function getRenderableSignatureImage(source, inkColor) {
+  const resolvedSource = ensureSignatureSource(source);
+  const normalizedInkColor = normalizeSignatureInkColor(inkColor);
+  const cacheKey = `${normalizedInkColor}::${resolvedSource}`;
+  const cached = processedSignatureCache.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+  const pending = (async () => {
+    const image = await loadSignatureImage(resolvedSource);
+    const canvas = createCanvas(image.width, image.height);
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return resolvedSource;
+    }
+    context.drawImage(image, 0, 0, image.width, image.height);
+    let imageData;
+    try {
+      imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    } catch {
+      return resolvedSource;
+    }
+    const inkRgb = parseInkColor(normalizedInkColor);
+    const transparentRender = hasMeaningfulTransparency(imageData.data) ? createTintedSignatureFromAlpha(
+      imageData.data,
+      canvas.width,
+      canvas.height,
+      inkRgb
+    ) : null;
+    if (transparentRender) {
+      return transparentRender.toDataURL("image/png");
+    }
+    const background = detectUniformBackground(
+      imageData.data,
+      canvas.width,
+      canvas.height
+    );
+    if (!background) {
+      return resolvedSource;
+    }
+    const extractedRender = createTintedSignatureFromSolidBackground(
+      imageData.data,
+      canvas.width,
+      canvas.height,
+      background,
+      inkRgb
+    );
+    return extractedRender ? extractedRender.toDataURL("image/png") : resolvedSource;
+  })().catch(() => resolvedSource);
+  processedSignatureCache.set(cacheKey, pending);
+  return pending;
+}
+
+// src/components/RenderableSignatureImage.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+function RenderableSignatureImage(props) {
+  const { signatureImageUrl, inkColor, ...imageProps } = props;
+  const [resolvedSrc, setResolvedSrc] = (0, import_react.useState)(signatureImageUrl);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    void getRenderableSignatureImage(signatureImageUrl, inkColor).then((nextSource) => {
+      if (!cancelled) {
+        setResolvedSrc(nextSource);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setResolvedSrc(signatureImageUrl);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [inkColor, signatureImageUrl]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { ...imageProps, src: resolvedSrc, decoding: "async", draggable: false });
+}
+
+// src/components/SignatureOverlay.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -189,9 +451,6 @@ function getLinkedAnnotationIds(annotations) {
     annotations.filter((annotation) => annotation.linkedSignaturePlacementId).map((annotation) => annotation.linkedSignaturePlacementId)
   );
 }
-function buildMaskImageValue(source) {
-  return `url("${source.replaceAll('"', '\\"')}")`;
-}
 function SignatureOverlay(props) {
   const {
     surfaceKey,
@@ -228,22 +487,22 @@ function SignatureOverlay(props) {
     onSelectPlacement,
     onSelectAnnotation
   } = props;
-  const layerRef = (0, import_react.useRef)(null);
-  const [dragState, setDragState] = (0, import_react.useState)(null);
-  const visiblePlacements = (0, import_react.useMemo)(
+  const layerRef = (0, import_react2.useRef)(null);
+  const [dragState, setDragState] = (0, import_react2.useState)(null);
+  const visiblePlacements = (0, import_react2.useMemo)(
     () => placements.filter((placement) => placement.surfaceKey === surfaceKey),
     [placements, surfaceKey]
   );
-  const visibleAnnotations = (0, import_react.useMemo)(
+  const visibleAnnotations = (0, import_react2.useMemo)(
     () => annotations.filter((annotation) => annotation.surfaceKey === surfaceKey),
     [annotations, surfaceKey]
   );
-  const linkedAnnotationIds = (0, import_react.useMemo)(
+  const linkedAnnotationIds = (0, import_react2.useMemo)(
     () => getLinkedAnnotationIds(visibleAnnotations),
     [visibleAnnotations]
   );
   const captureMode = pendingSignature ? "signature" : pendingAnnotation ? "annotation" : null;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (captureMode || dragState) {
       return;
     }
@@ -262,7 +521,7 @@ function SignatureOverlay(props) {
       window.removeEventListener("pointerdown", handlePointerDown, true);
     };
   }, [captureMode, dragState, onSelectAnnotation, onSelectPlacement]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!dragState) {
       return;
     }
@@ -408,8 +667,8 @@ function SignatureOverlay(props) {
       rect: layerRef.current.getBoundingClientRect()
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: layerRef, className: "hv-signature-overlay", children: [
-    captureMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-signature-overlay-capture", onClick: handlePlace, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-signature-overlay-hint", children: captureMode === "annotation" ? annotationHint : placeHint }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: layerRef, className: "hv-signature-overlay", children: [
+    captureMode && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-signature-overlay-capture", onClick: handlePlace, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-signature-overlay-hint", children: captureMode === "annotation" ? annotationHint : placeHint }) }),
     visiblePlacements.map((placement) => {
       const isActive = placement.id === activePlacementId;
       const hasLinkedAnnotation = linkedAnnotationIds.has(placement.id);
@@ -417,8 +676,7 @@ function SignatureOverlay(props) {
       const jobTitle = placement.signature.jobTitle?.trim();
       const signedDate = normalizeSignatureDate(placement.signature.dateSigned);
       const signatureColor = normalizeSignatureInkColor(placement.signatureColor);
-      const maskImage = buildMaskImageValue(placement.signature.signatureImageUrl);
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
           className: `hv-signature-stamp ${isActive ? "active" : ""}`,
@@ -443,7 +701,7 @@ function SignatureOverlay(props) {
             onSelectAnnotation(null);
           },
           children: [
-            isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "button",
               {
                 type: "button",
@@ -459,26 +717,22 @@ function SignatureOverlay(props) {
                 children: "x"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-signature-image-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-signature-image-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              RenderableSignatureImage,
               {
-                role: "img",
-                "aria-label": signer ? `${signatureAltByLabel} ${signer}` : signatureAltLabel,
-                className: "hv-signature-image hv-signature-ink",
-                style: {
-                  backgroundColor: SIGNATURE_INK_COLOR_VALUES[signatureColor],
-                  maskImage,
-                  WebkitMaskImage: maskImage
-                }
+                signatureImageUrl: placement.signature.signatureImageUrl,
+                inkColor: signatureColor,
+                alt: signer ? `${signatureAltByLabel} ${signer}` : signatureAltLabel,
+                className: "hv-signature-image"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hv-signature-meta", children: [
-              signer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-signature-meta-name", children: signer }),
-              jobTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-signature-meta-jobtitle", children: jobTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-signature-meta-date", children: signedDate })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-signature-meta", children: [
+              signer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-meta-name", children: signer }),
+              jobTitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-meta-jobtitle", children: jobTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-meta-date", children: signedDate })
             ] }),
-            hasLinkedAnnotation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-signature-note-indicator", children: signatureNoteIndicatorLabel }),
-            isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            hasLinkedAnnotation && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-signature-note-indicator", children: signatureNoteIndicatorLabel }),
+            isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "div",
               {
                 className: "hv-signature-color-toolbar",
@@ -489,8 +743,8 @@ function SignatureOverlay(props) {
                   event.stopPropagation();
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-signature-color-toolbar-label", children: signatureColorLabel }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-color-toolbar-label", children: signatureColorLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "button",
                     {
                       type: "button",
@@ -505,7 +759,7 @@ function SignatureOverlay(props) {
                 ]
               }
             ),
-            isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 className: "hv-signature-resize",
@@ -526,7 +780,7 @@ function SignatureOverlay(props) {
       const isLinked = Boolean(annotation.linkedSignaturePlacementId);
       const hasText = annotation.text.trim().length > 0;
       if (!isActive) {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "button",
           {
             type: "button",
@@ -542,12 +796,12 @@ function SignatureOverlay(props) {
               onSelectAnnotation(annotation.id);
               onSelectPlacement(null);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MessageSquare, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.MessageSquare, { size: 14 })
           },
           annotation.id
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
           className: `hv-annotation-card ${isActive ? "active" : ""} ${isLinked ? "linked" : ""}`,
@@ -563,7 +817,7 @@ function SignatureOverlay(props) {
             onSelectPlacement(null);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "div",
               {
                 className: "hv-annotation-header",
@@ -581,11 +835,11 @@ function SignatureOverlay(props) {
                   );
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hv-annotation-header-copy", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-annotation-title", children: isLinked ? linkedAnnotationTitle : annotationTitle }),
-                    isLinked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-annotation-badge", children: linkedAnnotationBadge })
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-annotation-header-copy", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-annotation-title", children: isLinked ? linkedAnnotationTitle : annotationTitle }),
+                    isLinked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-annotation-badge", children: linkedAnnotationBadge })
                   ] }),
-                  isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "button",
                     {
                       type: "button",
@@ -604,7 +858,7 @@ function SignatureOverlay(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-annotation-body", children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-annotation-body", children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "textarea",
               {
                 value: annotation.text,
@@ -618,14 +872,14 @@ function SignatureOverlay(props) {
                   event.stopPropagation();
                 }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 className: `hv-annotation-preview ${hasText ? "" : "empty"}`,
                 children: hasText ? annotation.text : annotationPlaceholder
               }
             ) }),
-            isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 className: "hv-annotation-resize",
@@ -1460,7 +1714,7 @@ function ensureImageSource(source) {
   }
   return `data:image/png;base64,${trimmedSource}`;
 }
-function createCanvas(width, height) {
+function createCanvas2(width, height) {
   const canvas = document.createElement("canvas");
   canvas.width = Math.max(1, Math.round(width));
   canvas.height = Math.max(1, Math.round(height));
@@ -1501,7 +1755,7 @@ async function tryLoadImage(source) {
   }
 }
 function getOpaqueImageBounds(image, alphaThreshold = 8) {
-  const canvas = createCanvas(image.width, image.height);
+  const canvas = createCanvas2(image.width, image.height);
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     return {
@@ -1852,7 +2106,7 @@ async function renderDecorationCanvasFromModel(model, kind) {
   }
   const canvasWidth = 1600;
   const canvasHeight = kind === "header" ? 146 : 88;
-  const canvas = createCanvas(canvasWidth, canvasHeight);
+  const canvas = createCanvas2(canvasWidth, canvasHeight);
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     return null;
@@ -2052,7 +2306,7 @@ function applyPageDecorationsToCanvas(baseCanvas, decorations) {
   if (!decorations?.headerCanvas && !decorations?.footerCanvas) {
     return baseCanvas;
   }
-  const pageCanvas = createCanvas(baseCanvas.width, baseCanvas.height);
+  const pageCanvas = createCanvas2(baseCanvas.width, baseCanvas.height);
   const ctx = pageCanvas.getContext("2d");
   if (!ctx) {
     return baseCanvas;
@@ -2099,19 +2353,6 @@ function applyPageDecorationsToCanvas(baseCanvas, decorations) {
 function formatSignedDate(value) {
   return normalizeSignatureDate(value);
 }
-function createTintedImageCanvas(image, signatureColor) {
-  const tintedCanvas = createCanvas(image.width, image.height);
-  const tintedCtx = tintedCanvas.getContext("2d");
-  if (!tintedCtx) {
-    return null;
-  }
-  tintedCtx.drawImage(image, 0, 0);
-  tintedCtx.globalCompositeOperation = "source-in";
-  tintedCtx.fillStyle = signatureColor;
-  tintedCtx.fillRect(0, 0, tintedCanvas.width, tintedCanvas.height);
-  tintedCtx.globalCompositeOperation = "source-over";
-  return tintedCanvas;
-}
 async function drawSignatureStamp(ctx, placement, x, y, width, height, options) {
   const isSlideStamp = placement.surfaceKind === "slide";
   const borderless = options?.borderless ?? false;
@@ -2121,12 +2362,12 @@ async function drawSignatureStamp(ctx, placement, x, y, width, height, options)
     isSlideStamp ? 46 : 40,
     height * (isSlideStamp ? 0.36 : 0.32)
   );
-  const signatureImage = await loadImage(placement.signature.signatureImageUrl);
   const signatureColor = normalizeSignatureInkColor(placement.signatureColor);
-  const tintedSignatureImage = createTintedImageCanvas(
-    signatureImage,
-    SIGNATURE_INK_COLOR_VALUES[signatureColor]
+  const renderableSignatureImage = await getRenderableSignatureImage(
+    placement.signature.signatureImageUrl,
+    signatureColor
   );
+  const signatureImage = await loadImage(renderableSignatureImage);
   const imageBounds = getOpaqueImageBounds(signatureImage);
   const signer = placement.signature.signedBy?.trim() || "";
   const jobTitle = placement.signature.jobTitle?.trim() || "";
@@ -2157,7 +2398,7 @@ async function drawSignatureStamp(ctx, placement, x, y, width, height, options)
   const imageBaseY = isSlideStamp ? y : y + padding;
   const imageY = imageBaseY + Math.max(imageAreaHeight - imageHeight, 0) * (isSlideStamp ? 0.7 : 0.18);
   ctx.drawImage(
-    tintedSignatureImage || signatureImage,
+    signatureImage,
     imageBounds.sx,
     imageBounds.sy,
     imageBounds.sw,
@@ -2355,7 +2596,7 @@ async function createSignatureStampDataUrl(placement, width, height) {
   const aspectRatio = placement.width > 0 && placement.height > 0 ? placement.width / placement.height : 3.1;
   const targetHeight = height ?? (placement.surfaceKind === "slide" ? 320 : 260);
   const targetWidth = width ?? Math.max(480, Math.round(targetHeight * aspectRatio));
-  const canvas = createCanvas(targetWidth, targetHeight);
+  const canvas = createCanvas2(targetWidth, targetHeight);
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     throw new Error("Unable to render the signature stamp.");
@@ -2364,7 +2605,7 @@ async function createSignatureStampDataUrl(placement, width, height) {
   return canvas.toDataURL("image/png");
 }
 async function createAnnotationCardDataUrl(annotation, width = 720, height = 360, labels = defaultExportLocaleLabels) {
-  const canvas = createCanvas(width, height);
+  const canvas = createCanvas2(width, height);
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     throw new Error("Unable to render the annotation.");
@@ -2689,7 +2930,7 @@ function splitTallCanvas(canvas) {
   }
   for (let offset = 0; offset < canvas.height; offset += maxSliceHeight) {
     const sliceHeight = Math.min(maxSliceHeight, canvas.height - offset);
-    const sliceCanvas = createCanvas(canvas.width, sliceHeight);
+    const sliceCanvas = createCanvas2(canvas.width, sliceHeight);
     const ctx = sliceCanvas.getContext("2d");
     if (!ctx) {
       continue;
@@ -2824,7 +3065,7 @@ async function renderSlidesToCanvases(exportState, placements, annotations, labe
   const scale = targetWidth / slideWidth;
   const canvases = [];
   for (const [index, slide] of exportState.slides.entries()) {
-    const canvas = createCanvas(slideWidth * scale, slideHeight * scale);
+    const canvas = createCanvas2(slideWidth * scale, slideHeight * scale);
     const ctx = canvas.getContext("2d");
     if (!ctx) {
       continue;
@@ -2942,7 +3183,7 @@ async function renderSlidesToCanvases(exportState, placements, annotations, labe
     );
     canvases.push(canvas);
   }
-  return canvases.length > 0 ? canvases : [createCanvas(1280, 720)];
+  return canvases.length > 0 ? canvases : [createCanvas2(1280, 720)];
 }
 function createSheetMergeLookup(merges) {
   const starts = /* @__PURE__ */ new Map();
@@ -3108,7 +3349,7 @@ async function renderSheetsToCanvases(sheets, placements, annotations, labels =
     const visibleRowHeights = sheet.rowHeights.slice(0, sheet.renderedRowCount);
     const totalWidth = SHEET_ROW_HEADER_WIDTH + visibleColWidths.reduce((sum, value) => sum + value, 0);
     const totalHeight = SHEET_COLUMN_HEADER_HEIGHT + visibleRowHeights.reduce((sum, value) => sum + value, 0);
-    const canvas = createCanvas(totalWidth, totalHeight);
+    const canvas = createCanvas2(totalWidth, totalHeight);
     const ctx = canvas.getContext("2d");
     if (!ctx) {
       continue;
@@ -3233,7 +3474,7 @@ async function exportSignedPdfDocument(args) {
   for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber += 1) {
     const page = await pdf.getPage(pageNumber);
     const viewport = page.getViewport({ scale: 2 });
-    const canvas = createCanvas(viewport.width, viewport.height);
+    const canvas = createCanvas2(viewport.width, viewport.height);
     const ctx = canvas.getContext("2d");
     if (!ctx) {
       continue;
@@ -3285,7 +3526,7 @@ async function exportSignedImageFile(args) {
   const objectUrl = URL.createObjectURL(imageBlob);
   try {
     const image = await loadImage(objectUrl);
-    const canvas = createCanvas(image.width, image.height);
+    const canvas = createCanvas2(image.width, image.height);
     const ctx = canvas.getContext("2d");
     if (!ctx) {
       throw new Error("Unable to render the image document.");
@@ -3329,7 +3570,7 @@ async function exportSignedRichTextFile(args) {
     const canvases = [];
     for (const page of args.pages) {
       const image = await loadImage(page.imageUrl);
-      const canvas2 = createCanvas(page.width, page.height);
+      const canvas2 = createCanvas2(page.width, page.height);
       const ctx2 = canvas2.getContext("2d");
       if (!ctx2) {
         continue;
@@ -3686,13 +3927,13 @@ function sanitizeHtml(html) {
 }
 
 // src/editors/RichTextEditor.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var DOC_PAGE_WIDTH = 816;
 var DOC_PAGE_HEIGHT = 1056;
 var PAGE_RENDER_SCALE = 2;
 var PAGE_BREAK_MIN_FILL = 0.55;
 var DOCX_PREVIEW_CLASS_NAME = "hv-docx-page";
-function createCanvas2(width, height) {
+function createCanvas3(width, height) {
   const canvas = document.createElement("canvas");
   canvas.width = Math.max(1, Math.round(width));
   canvas.height = Math.max(1, Math.round(height));
@@ -3777,7 +4018,7 @@ function calculatePageBreakOffsets(container, pageHeight) {
 function createThumbnailDataUrl(canvas) {
   const thumbWidth = 160;
   const thumbScale = thumbWidth / canvas.width;
-  const thumbCanvas = createCanvas2(thumbWidth, canvas.height * thumbScale);
+  const thumbCanvas = createCanvas3(thumbWidth, canvas.height * thumbScale);
   const thumbCtx = thumbCanvas.getContext("2d");
   if (thumbCtx) {
     thumbCtx.fillStyle = "#ffffff";
@@ -3795,7 +4036,7 @@ function buildPageModels(sourceCanvas, breakOffsets) {
   for (const [index, endOffset] of breakOffsets.entries()) {
     const sourceY = previousOffset * scale;
     const sourceHeight = Math.max((endOffset - previousOffset) * scale, 1);
-    const pageCanvas = createCanvas2(pageCanvasWidth, pageCanvasHeight);
+    const pageCanvas = createCanvas3(pageCanvasWidth, pageCanvasHeight);
     const pageCtx = pageCanvas.getContext("2d");
     if (!pageCtx) {
       previousOffset = endOffset;
@@ -3825,7 +4066,7 @@ function buildPageModels(sourceCanvas, breakOffsets) {
     previousOffset = endOffset;
   }
   if (pages.length === 0) {
-    const blankCanvas = createCanvas2(
+    const blankCanvas = createCanvas3(
       DOC_PAGE_WIDTH * PAGE_RENDER_SCALE,
       DOC_PAGE_HEIGHT * PAGE_RENDER_SCALE
     );
@@ -4175,36 +4416,38 @@ function RichTextEditor(props) {
     media: false,
     history: false
   });
-  const editorRef = (0, import_react2.useRef)(null);
-  const measureRef = (0, import_react2.useRef)(null);
-  const docxPreviewRef = (0, import_react2.useRef)(null);
-  const imageInputRef = (0, import_react2.useRef)(null);
-  const imagePreviewRef = (0, import_react2.useRef)(null);
-  const savedSelectionRef = (0, import_react2.useRef)(null);
-  const imageDragPointerIdRef = (0, import_react2.useRef)(null);
-  const [contentHtml, setContentHtml] = (0, import_react2.useState)("");
-  const [editableContentHtml, setEditableContentHtml] = (0, import_react2.useState)("");
-  const [selectedTemplateId, setSelectedTemplateId] = (0, import_react2.useState)("blank");
-  const [areTemplatesVisible, setAreTemplatesVisible] = (0, import_react2.useState)(true);
-  const [isCompactToolbar, setIsCompactToolbar] = (0, import_react2.useState)(false);
-  const [expandedToolbarSections, setExpandedToolbarSections] = (0, import_react2.useState)(
+  const editorRef = (0, import_react3.useRef)(null);
+  const measureRef = (0, import_react3.useRef)(null);
+  const docxPreviewRef = (0, import_react3.useRef)(null);
+  const imageInputRef = (0, import_react3.useRef)(null);
+  const imagePreviewRef = (0, import_react3.useRef)(null);
+  const savedSelectionRef = (0, import_react3.useRef)(null);
+  const imageDragPointerIdRef = (0, import_react3.useRef)(null);
+  const [contentHtml, setContentHtml] = (0, import_react3.useState)("");
+  const [editableContentHtml, setEditableContentHtml] = (0, import_react3.useState)("");
+  const [selectedTemplateId, setSelectedTemplateId] = (0, import_react3.useState)("blank");
+  const [areTemplatesVisible, setAreTemplatesVisible] = (0, import_react3.useState)(true);
+  const [isCompactToolbar, setIsCompactToolbar] = (0, import_react3.useState)(false);
+  const [expandedToolbarSections, setExpandedToolbarSections] = (0, import_react3.useState)(
     createCompactToolbarState
   );
-  const [imageEditorState, setImageEditorState] = (0, import_react2.useState)(null);
-  const [toolbarState, setToolbarState] = (0, import_react2.useState)(
+  const [imageEditorState, setImageEditorState] = (0, import_react3.useState)(null);
+  const [toolbarState, setToolbarState] = (0, import_react3.useState)(
     createDefaultToolbarState()
   );
-  const [loading, setLoading] = (0, import_react2.useState)(false);
-  const [isPaginating, setIsPaginating] = (0, import_react2.useState)(false);
-  const [pages, setPages] = (0, import_react2.useState)([]);
-  const [docxPages, setDocxPages] = (0, import_react2.useState)([]);
-  const [isRenderingDocxPreview, setIsRenderingDocxPreview] = (0, import_react2.useState)(false);
-  const [docxPreviewFailed, setDocxPreviewFailed] = (0, import_react2.useState)(false);
-  const mdParser = (0, import_react2.useRef)(new import_markdown_it.default({ html: true, linkify: true }));
-  const authoringTemplates = (0, import_react2.useMemo)(() => createAuthoringTemplates(), []);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [isPaginating, setIsPaginating] = (0, import_react3.useState)(false);
+  const [pages, setPages] = (0, import_react3.useState)([]);
+  const [docxPages, setDocxPages] = (0, import_react3.useState)([]);
+  const [isRenderingDocxPreview, setIsRenderingDocxPreview] = (0, import_react3.useState)(false);
+  const [docxPreviewFailed, setDocxPreviewFailed] = (0, import_react3.useState)(false);
+  const mdParser = (0, import_react3.useRef)(new import_markdown_it.default({ html: true, linkify: true }));
+  const authoringTemplates = (0, import_react3.useMemo)(() => createAuthoringTemplates(), []);
   const isAuthoringMode = props.mode === "edit" || props.mode === "create";
+  const isPlainTextFile = props.fileName.toLowerCase().endsWith(".txt") || props.fileType === "txt";
   const isDocxFile = props.fileName.toLowerCase().endsWith(".docx") || props.fileType === "docx";
   const useDocxPreviewView = props.mode === "view" && isDocxFile && Boolean(props.arrayBuffer);
+  const useContinuousPlainTextView = props.mode === "view" && isPlainTextFile;
   const syncTemplateSelection = (nextHtml) => {
     const matchedTemplate = authoringTemplates.find(
       (template) => template.html === nextHtml
@@ -4248,7 +4491,7 @@ function RichTextEditor(props) {
     }
     setToolbarState(readToolbarState(editorRef.current, savedSelectionRef.current));
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const loadDoc = async () => {
       if (!props.arrayBuffer) {
         const templateHtml = props.mode === "create" ? authoringTemplates[0]?.html ?? "" : "";
@@ -4309,7 +4552,7 @@ function RichTextEditor(props) {
     props.locale,
     props.mode
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!isAuthoringMode || !editorRef.current) {
       return;
     }
@@ -4318,7 +4561,7 @@ function RichTextEditor(props) {
     }
     refreshToolbarState();
   }, [editableContentHtml, isAuthoringMode]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!isAuthoringMode || typeof document === "undefined") {
       return;
     }
@@ -4338,12 +4581,12 @@ function RichTextEditor(props) {
       document.removeEventListener("selectionchange", handleSelectionChange);
     };
   }, [isAuthoringMode]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (props.mode === "create") {
       setAreTemplatesVisible(true);
     }
   }, [props.mode, props.fileName]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -4360,7 +4603,7 @@ function RichTextEditor(props) {
       mediaQuery.removeEventListener("change", syncCompactState);
     };
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (toolbarState.hasSelectedImage && toolbarState.imageSrc) {
       setImageEditorState({
         src: toolbarState.imageSrc,
@@ -4382,7 +4625,7 @@ function RichTextEditor(props) {
     toolbarState.imageScale,
     toolbarState.imageSrc
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!useDocxPreviewView || !docxPreviewRef.current || !props.arrayBuffer) {
       setDocxPages([]);
       setDocxPreviewFailed(false);
@@ -4481,13 +4724,23 @@ function RichTextEditor(props) {
     props.onThumbs,
     useDocxPreviewView
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (props.mode !== "view") {
       setPages([]);
       props.onPageCount(1);
       props.onThumbs([]);
       return;
     }
+    if (useContinuousPlainTextView) {
+      setPages([]);
+      setIsPaginating(false);
+      props.onPageCount(1);
+      props.onThumbs([]);
+      if (props.currentPage !== 1) {
+        props.onCurrentPageChange(1);
+      }
+      return;
+    }
     if (useDocxPreviewView && !docxPreviewFailed) {
       setPages([]);
       return;
@@ -4556,17 +4809,26 @@ function RichTextEditor(props) {
   }, [
     contentHtml,
     docxPreviewFailed,
+    props.currentPage,
     props.mode,
     props.onCurrentPageChange,
     props.onPageCount,
     props.onThumbs,
+    useContinuousPlainTextView,
     useDocxPreviewView
   ]);
-  const activeViewPages = (0, import_react2.useMemo)(
-    () => props.mode === "view" ? useDocxPreviewView && !docxPreviewFailed ? docxPages : pages : void 0,
-    [docxPages, docxPreviewFailed, pages, props.mode, useDocxPreviewView]
+  const activeViewPages = (0, import_react3.useMemo)(
+    () => props.mode === "view" ? useDocxPreviewView && !docxPreviewFailed ? docxPages : useContinuousPlainTextView ? void 0 : pages : void 0,
+    [
+      docxPages,
+      docxPreviewFailed,
+      pages,
+      props.mode,
+      useContinuousPlainTextView,
+      useDocxPreviewView
+    ]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const container = props.mode === "view" ? useDocxPreviewView && !docxPreviewFailed ? docxPreviewRef.current : measureRef.current : editorRef.current;
     props.onExportStateChange?.({
       container,
@@ -4582,12 +4844,12 @@ function RichTextEditor(props) {
     props.onExportStateChange,
     useDocxPreviewView
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     return () => {
       props.onExportStateChange?.(null);
     };
   }, [props.onExportStateChange]);
-  const pagesToShow = (0, import_react2.useMemo)(
+  const pagesToShow = (0, import_react3.useMemo)(
     () => getPagesToShow(
       useDocxPreviewView && !docxPreviewFailed ? docxPages.length : pages.length,
       props.currentPage,
@@ -4888,10 +5150,10 @@ function RichTextEditor(props) {
   };
   const renderToolbarSectionHeader = (section, label) => {
     if (!isCompactToolbar) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-label", children: label });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-label", children: label });
     }
     const isOpen = isToolbarSectionOpen(section);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
         type: "button",
@@ -4899,8 +5161,8 @@ function RichTextEditor(props) {
         "aria-expanded": isOpen,
         onClick: () => toggleToolbarSection(section),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-label", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-toggle-copy", children: isOpen ? props.locale["documents.richText.toolbar.collapseSection"] : props.locale["documents.richText.toolbar.expandSection"] })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-toggle-copy", children: isOpen ? props.locale["documents.richText.toolbar.collapseSection"] : props.locale["documents.richText.toolbar.expandSection"] })
         ]
       }
     );
@@ -4920,8 +5182,8 @@ function RichTextEditor(props) {
     });
   };
   if (props.mode === "view" && useDocxPreviewView && !docxPreviewFailed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-docx-preview-shell", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-docx-preview-shell", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           ref: docxPreviewRef,
@@ -4929,21 +5191,21 @@ function RichTextEditor(props) {
           "aria-label": "DOCX document pages"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           className: props.layout === "side-by-side" ? "hv-view-double" : "hv-view-single",
-          children: loading || isRenderingDocxPreview ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
+          children: loading || isRenderingDocxPreview ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
             const page = docxPages[pageNumber - 1];
             if (!page) {
               return null;
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
                 className: "hv-page-container hv-docx-page-surface",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "img",
                     {
                       src: page.imageUrl,
@@ -4951,7 +5213,7 @@ function RichTextEditor(props) {
                       className: "hv-docx-page-image"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     SignatureOverlay,
                     {
                       surfaceKey: page.surfaceKey,
@@ -4996,9 +5258,66 @@ function RichTextEditor(props) {
       )
     ] });
   }
+  if (props.mode === "view" && useContinuousPlainTextView) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-docx-measure-shell", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          ref: measureRef,
+          className: "hv-docx-content hv-docx-measure-content hv-text-scroll-content",
+          dangerouslySetInnerHTML: { __html: contentHtml }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-view-single", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-page-container hv-text-scroll-surface", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-page-container hv-text-scroll-surface", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: "hv-docx-content hv-text-scroll-content",
+            dangerouslySetInnerHTML: { __html: contentHtml }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          SignatureOverlay,
+          {
+            surfaceKey: "document:main",
+            surfaceKind: "document",
+            page: 1,
+            placements: props.signatureOverlay.placements,
+            annotations: props.signatureOverlay.annotations,
+            pendingSignature: props.signatureOverlay.pendingSignature,
+            pendingAnnotation: props.signatureOverlay.pendingAnnotation,
+            activePlacementId: props.signatureOverlay.activePlacementId,
+            activeAnnotationId: props.signatureOverlay.activeAnnotationId,
+            placeHint: props.signatureOverlay.placeHint,
+            annotationHint: props.signatureOverlay.annotationHint,
+            annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
+            signatureAltLabel: props.signatureOverlay.signatureAltLabel,
+            signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
+            signatureNoteIndicatorLabel: props.signatureOverlay.signatureNoteIndicatorLabel,
+            signatureColorLabel: props.signatureOverlay.signatureColorLabel,
+            signatureColorNames: props.signatureOverlay.signatureColorNames,
+            removeSignatureLabel: props.signatureOverlay.removeSignatureLabel,
+            annotationTitle: props.signatureOverlay.annotationTitle,
+            linkedAnnotationTitle: props.signatureOverlay.linkedAnnotationTitle,
+            linkedAnnotationBadge: props.signatureOverlay.linkedAnnotationBadge,
+            openAnnotationLabel: props.signatureOverlay.openAnnotationLabel,
+            removeAnnotationLabel: props.signatureOverlay.removeAnnotationLabel,
+            onPlaceSignature: props.signatureOverlay.onPlaceSignature,
+            onPlaceAnnotation: props.signatureOverlay.onPlaceAnnotation,
+            onUpdatePlacement: props.signatureOverlay.onUpdatePlacement,
+            onUpdateAnnotation: props.signatureOverlay.onUpdateAnnotation,
+            onRemovePlacement: props.signatureOverlay.onRemovePlacement,
+            onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
+            onSelectPlacement: props.signatureOverlay.onSelectPlacement,
+            onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+          }
+        )
+      ] }) })
+    ] });
+  }
   if (props.mode === "view") {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-docx-measure-shell", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-docx-measure-shell", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           ref: measureRef,
@@ -5006,21 +5325,21 @@ function RichTextEditor(props) {
           dangerouslySetInnerHTML: { __html: contentHtml }
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           className: props.layout === "side-by-side" ? "hv-view-double" : "hv-view-single",
-          children: loading || isPaginating ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
+          children: loading || isPaginating ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
             const page = pages[pageNumber - 1];
             if (!page) {
               return null;
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
                 className: "hv-page-container hv-docx-page-surface",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "img",
                     {
                       src: page.imageUrl,
@@ -5028,7 +5347,7 @@ function RichTextEditor(props) {
                       className: "hv-docx-page-image"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     SignatureOverlay,
                     {
                       surfaceKey: page.surfaceKey,
@@ -5073,8 +5392,8 @@ function RichTextEditor(props) {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-view-single hv-richtext-authoring-shell", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-view-single hv-richtext-authoring-shell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "input",
       {
         ref: imageInputRef,
@@ -5084,20 +5403,20 @@ function RichTextEditor(props) {
         onChange: handleInsertImage
       }
     ),
-    isAuthoringMode && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-richtext-authoring-top", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    isAuthoringMode && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-richtext-authoring-top", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         className: "hv-richtext-toolbar",
         role: "toolbar",
         "aria-label": props.locale["a11y.ribbon"],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
               renderToolbarSectionHeader(
                 "style",
                 props.locale["documents.richText.toolbar.styleLabel"]
               ),
-              isToolbarSectionOpen("style") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              isToolbarSectionOpen("style") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "select",
                 {
                   className: "hv-richtext-select",
@@ -5107,22 +5426,22 @@ function RichTextEditor(props) {
                     event.target.value === "blockquote" ? "BLOCKQUOTE" : event.target.value.toUpperCase()
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "p", children: props.locale["documents.richText.toolbar.paragraph"] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "h1", children: props.locale["documents.richText.toolbar.heading1"] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "h2", children: props.locale["documents.richText.toolbar.heading2"] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "h3", children: props.locale["documents.richText.toolbar.heading3"] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "blockquote", children: props.locale["documents.richText.toolbar.quote"] })
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "p", children: props.locale["documents.richText.toolbar.paragraph"] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "h1", children: props.locale["documents.richText.toolbar.heading1"] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "h2", children: props.locale["documents.richText.toolbar.heading2"] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "h3", children: props.locale["documents.richText.toolbar.heading3"] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "blockquote", children: props.locale["documents.richText.toolbar.quote"] })
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
               renderToolbarSectionHeader(
                 "format",
                 props.locale["documents.richText.toolbar.formatLabel"]
               ),
-              isToolbarSectionOpen("format") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              isToolbarSectionOpen("format") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5132,7 +5451,7 @@ function RichTextEditor(props) {
                     children: "B"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5142,7 +5461,7 @@ function RichTextEditor(props) {
                     children: "I"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5152,7 +5471,7 @@ function RichTextEditor(props) {
                     children: "U"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5162,7 +5481,7 @@ function RichTextEditor(props) {
                     children: "UL"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5172,7 +5491,7 @@ function RichTextEditor(props) {
                     children: "1."
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5182,7 +5501,7 @@ function RichTextEditor(props) {
                     children: "L"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5192,7 +5511,7 @@ function RichTextEditor(props) {
                     children: "C"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5202,7 +5521,7 @@ function RichTextEditor(props) {
                     children: "R"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5214,13 +5533,13 @@ function RichTextEditor(props) {
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
               renderToolbarSectionHeader(
                 "insert",
                 props.locale["documents.richText.toolbar.insertLabel"]
               ),
-              isToolbarSectionOpen("insert") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              isToolbarSectionOpen("insert") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5230,7 +5549,7 @@ function RichTextEditor(props) {
                     children: "Link"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5242,13 +5561,13 @@ function RichTextEditor(props) {
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
               renderToolbarSectionHeader(
                 "media",
                 props.locale["documents.richText.toolbar.mediaLabel"]
               ),
-              isToolbarSectionOpen("media") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              isToolbarSectionOpen("media") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5258,7 +5577,7 @@ function RichTextEditor(props) {
                     children: "Image"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5270,13 +5589,13 @@ function RichTextEditor(props) {
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
               renderToolbarSectionHeader(
                 "history",
                 props.locale["documents.richText.toolbar.historyLabel"]
               ),
-              isToolbarSectionOpen("history") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              isToolbarSectionOpen("history") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5286,7 +5605,7 @@ function RichTextEditor(props) {
                     children: "Undo"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5299,13 +5618,13 @@ function RichTextEditor(props) {
               ] })
             ] })
           ] }),
-          toolbarState.hasSelectedImage && imageEditorState && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-context-panel", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-richtext-context-header", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: props.locale["documents.richText.imageEditorTitle"] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: props.locale["documents.richText.imageEditorHelp"] })
+          toolbarState.hasSelectedImage && imageEditorState && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-context-panel", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-richtext-context-header", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: props.locale["documents.richText.imageEditorTitle"] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: props.locale["documents.richText.imageEditorHelp"] })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-image-editor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-richtext-image-preview-card", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-image-editor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-richtext-image-preview-card", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "div",
                 {
                   ref: imagePreviewRef,
@@ -5315,7 +5634,7 @@ function RichTextEditor(props) {
                   onPointerUp: handleImagePreviewPointerUp,
                   onPointerCancel: handleImagePreviewPointerUp,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "img",
                       {
                         src: imageEditorState.src,
@@ -5326,7 +5645,7 @@ function RichTextEditor(props) {
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "div",
                       {
                         className: "hv-richtext-image-focus-point",
@@ -5339,11 +5658,11 @@ function RichTextEditor(props) {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-image-controls", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageSizeLabel"] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-image-controls", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageSizeLabel"] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5352,7 +5671,7 @@ function RichTextEditor(props) {
                         children: "S"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5361,7 +5680,7 @@ function RichTextEditor(props) {
                         children: "M"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5370,7 +5689,7 @@ function RichTextEditor(props) {
                         children: "L"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5381,10 +5700,10 @@ function RichTextEditor(props) {
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageCropLabel"] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageCropLabel"] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5393,7 +5712,7 @@ function RichTextEditor(props) {
                         children: "Orig"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5402,7 +5721,7 @@ function RichTextEditor(props) {
                         children: "Wide"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5411,7 +5730,7 @@ function RichTextEditor(props) {
                         children: "1:1"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5422,10 +5741,10 @@ function RichTextEditor(props) {
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageAlignLabel"] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageAlignLabel"] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5434,7 +5753,7 @@ function RichTextEditor(props) {
                         children: "Left"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5443,7 +5762,7 @@ function RichTextEditor(props) {
                         children: "Center"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5454,9 +5773,9 @@ function RichTextEditor(props) {
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "hv-richtext-range-group", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: props.locale["documents.richText.imageZoom"] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "hv-richtext-range-group", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: props.locale["documents.richText.imageZoom"] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "input",
                     {
                       type: "range",
@@ -5479,18 +5798,18 @@ function RichTextEditor(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("strong", { children: [
                     imageEditorState.scale.toFixed(2),
                     "x"
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-focus-readout", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-focus-readout", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
                     "X ",
                     Math.round(imageEditorState.focusX),
                     "%"
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
                     "Y ",
                     Math.round(imageEditorState.focusY),
                     "%"
@@ -5499,10 +5818,10 @@ function RichTextEditor(props) {
               ] })
             ] })
           ] }),
-          !toolbarState.hasSelectedImage && toolbarState.insideTable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-richtext-context-panel hv-richtext-context-panel-compact", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.tableLabel"] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          !toolbarState.hasSelectedImage && toolbarState.insideTable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-richtext-context-panel hv-richtext-context-panel-compact", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.tableLabel"] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5512,7 +5831,7 @@ function RichTextEditor(props) {
                   children: "+Row"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5522,7 +5841,7 @@ function RichTextEditor(props) {
                   children: "+Col"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5532,7 +5851,7 @@ function RichTextEditor(props) {
                   children: "-Row"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5544,10 +5863,10 @@ function RichTextEditor(props) {
               )
             ] })
           ] }) }),
-          props.mode === "create" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-template-panel", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-template-strip", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-template-label", children: props.locale["documents.richText.templates"] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          props.mode === "create" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-template-panel", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-template-strip", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-template-label", children: props.locale["documents.richText.templates"] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5557,15 +5876,15 @@ function RichTextEditor(props) {
                 }
               )
             ] }),
-            areTemplatesVisible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-richtext-template-grid", children: authoringTemplates.map((template) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            areTemplatesVisible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-richtext-template-grid", children: authoringTemplates.map((template) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "button",
               {
                 type: "button",
                 className: `hv-richtext-template-card ${selectedTemplateId === template.id ? "active" : ""}`,
                 onClick: () => applyTemplate(template.id),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-template-title", children: props.locale[template.labelKey] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-template-description", children: props.locale[template.descriptionKey] })
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-template-title", children: props.locale[template.labelKey] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-template-description", children: props.locale[template.descriptionKey] })
                 ]
               },
               template.id
@@ -5574,8 +5893,8 @@ function RichTextEditor(props) {
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.processingText"] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-docx-editor-stage", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.processingText"] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-docx-editor-stage", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           ref: editorRef,
@@ -5599,7 +5918,7 @@ function RichTextEditor(props) {
           "aria-label": props.locale["a11y.editor"]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         SignatureOverlay,
         {
           surfaceKey: "document:main",
@@ -5640,9 +5959,9 @@ function RichTextEditor(props) {
 
 // src/editors/SpreadsheetEditor.tsx
 var import_exceljs2 = __toESM(require("exceljs"), 1);
-var import_react3 = require("react");
+var import_react4 = require("react");
 var XLSX2 = __toESM(require("xlsx"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var MAX_RENDER_ROWS = 400;
 var MAX_RENDER_COLS = 120;
 function toColumnLabel2(index) {
@@ -6226,11 +6545,11 @@ async function buildSheetModels(arrayBuffer, fileName) {
 }
 function SpreadsheetEditor(props) {
   const readonly = props.mode === "view";
-  const [sheets, setSheets] = (0, import_react3.useState)([]);
-  const [activeCell, setActiveCell] = (0, import_react3.useState)({ row: 0, col: 0 });
-  const [hasEdits, setHasEdits] = (0, import_react3.useState)(false);
-  const [dirtyCellAddressesBySheet, setDirtyCellAddressesBySheet] = (0, import_react3.useState)({});
-  (0, import_react3.useEffect)(() => {
+  const [sheets, setSheets] = (0, import_react4.useState)([]);
+  const [activeCell, setActiveCell] = (0, import_react4.useState)({ row: 0, col: 0 });
+  const [hasEdits, setHasEdits] = (0, import_react4.useState)(false);
+  const [dirtyCellAddressesBySheet, setDirtyCellAddressesBySheet] = (0, import_react4.useState)({});
+  (0, import_react4.useEffect)(() => {
     if (!props.arrayBuffer) {
       const nextSheets = props.mode === "create" ? [createBlankSheetModel("Sheet1")] : [];
       setSheets(nextSheets);
@@ -6280,7 +6599,7 @@ function SpreadsheetEditor(props) {
     props.onThumbs,
     props.mode
   ]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     props.onExportStateChange?.(
       sheets.length > 0 ? {
         sheets,
@@ -6306,7 +6625,7 @@ function SpreadsheetEditor(props) {
     Math.min(props.currentPage - 1, Math.max(sheets.length - 1, 0))
   );
   const activeSheet = sheets[activeSheetIndex];
-  const mergeLookup = (0, import_react3.useMemo)(
+  const mergeLookup = (0, import_react4.useMemo)(
     () => createMergeLookup(activeSheet?.merges ?? []),
     [activeSheet]
   );
@@ -6383,12 +6702,12 @@ function SpreadsheetEditor(props) {
     );
   };
   if (!activeSheet) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "hv-empty-state", children: props.locale["documents.sheetMissing"] }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "hv-empty-state", children: props.locale["documents.sheetMissing"] }) }) });
   }
   const isTruncated = activeSheet.rowCount > activeSheet.renderedRowCount || activeSheet.colCount > activeSheet.renderedColCount;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-page-container hv-sheet-container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-sheet-tabs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-sheet-tab-list", children: sheets.map((sheet, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-page-container hv-sheet-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-sheet-tabs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-sheet-tab-list", children: sheets.map((sheet, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
           type: "button",
@@ -6401,8 +6720,8 @@ function SpreadsheetEditor(props) {
         },
         sheet.name
       )) }),
-      !readonly && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-sheet-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      !readonly && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-sheet-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             type: "button",
@@ -6411,7 +6730,7 @@ function SpreadsheetEditor(props) {
             children: props.locale["documents.sheetAddSheet"]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             type: "button",
@@ -6420,7 +6739,7 @@ function SpreadsheetEditor(props) {
             children: props.locale["documents.sheetAddRow"]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             type: "button",
@@ -6431,12 +6750,12 @@ function SpreadsheetEditor(props) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-sheet-formula-bar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-sheet-formula-cell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-sheet-formula-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-sheet-formula-cell", children: [
         toColumnLabel2(activeCell.col),
         activeCell.row + 1
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
         {
           value: activeCellValue,
@@ -6446,14 +6765,14 @@ function SpreadsheetEditor(props) {
         }
       )
     ] }),
-    isTruncated && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-sheet-viewport-note", children: props.locale["documents.sheetTruncated"].replace("{rows}", String(activeSheet.renderedRowCount)).replace("{cols}", String(activeSheet.renderedColCount)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-sheet-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-sheet-surface", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { className: "hv-sheet-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "hv-sheet-corner" }),
+    isTruncated && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-sheet-viewport-note", children: props.locale["documents.sheetTruncated"].replace("{rows}", String(activeSheet.renderedRowCount)).replace("{cols}", String(activeSheet.renderedColCount)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-sheet-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-sheet-surface", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: "hv-sheet-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { className: "hv-sheet-corner" }),
           Array.from(
             { length: activeSheet.renderedColCount },
-            (_, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            (_, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "th",
               {
                 className: "hv-sheet-column-header",
@@ -6467,12 +6786,12 @@ function SpreadsheetEditor(props) {
             )
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: activeSheet.data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: activeSheet.data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "tr",
           {
             style: { height: activeSheet.rowHeights[rowIndex] ?? 32 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "hv-sheet-row-header", children: rowIndex + 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "hv-sheet-row-header", children: rowIndex + 1 }),
               row.map((cellValue, colIndex) => {
                 const cellKey = makeCellKey(rowIndex, colIndex);
                 if (mergeLookup.covered.has(cellKey)) {
@@ -6481,7 +6800,7 @@ function SpreadsheetEditor(props) {
                 const merge = mergeLookup.starts.get(cellKey);
                 const cellModel = activeSheet.cells[cellKey];
                 const width = activeSheet.colWidths[colIndex] ?? 96;
-                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "td",
                   {
                     rowSpan: merge ? merge.endRow - merge.startRow + 1 : 1,
@@ -6508,7 +6827,7 @@ function SpreadsheetEditor(props) {
           rowIndex
         )) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         SignatureOverlay,
         {
           surfaceKey: `sheet:${activeSheet.name}`,
@@ -6549,17 +6868,17 @@ function SpreadsheetEditor(props) {
 }
 
 // src/renderers/ImageRenderer.tsx
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ImageRenderer(props) {
-  const url = (0, import_react4.useMemo)(() => {
+  const url = (0, import_react5.useMemo)(() => {
     if (!props.arrayBuffer) {
       return void 0;
     }
     const mime = props.fileType === "svg" ? "image/svg+xml" : props.fileType === "png" ? "image/png" : "image/jpeg";
     return URL.createObjectURL(new Blob([props.arrayBuffer], { type: mime }));
   }, [props.arrayBuffer, props.fileType]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     return () => {
       if (url) {
         URL.revokeObjectURL(url);
@@ -6567,11 +6886,11 @@ function ImageRenderer(props) {
     };
   }, [url]);
   if (!props.arrayBuffer || !url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "hv-empty-state", children: props.locale["documents.imageMissing"] }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "hv-empty-state", children: props.locale["documents.imageMissing"] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-page-container hv-image-surface", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: url, alt: props.fileName, className: "hv-image-renderer" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hv-page-container hv-image-surface", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: url, alt: props.fileName, className: "hv-image-renderer" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       SignatureOverlay,
       {
         surfaceKey: "image:main",
@@ -6611,8 +6930,8 @@ function ImageRenderer(props) {
 
 // src/renderers/PdfRenderer.tsx
 var import_pdfjs_dist2 = require("pdfjs-dist");
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var pdfWorkerBlobUrlPromise2 = null;
 function yieldToBrowser() {
   return new Promise((resolve) => {
@@ -6637,10 +6956,10 @@ async function resolvePdfWorkerSrc(customWorkerSrc) {
 }
 function PdfRenderer(props) {
   const { url, arrayBuffer, layout, currentPage, workerSrc } = props;
-  const [doc, setDoc] = (0, import_react5.useState)(null);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const thumbnailJobRef = (0, import_react5.useRef)(0);
-  (0, import_react5.useEffect)(() => {
+  const [doc, setDoc] = (0, import_react6.useState)(null);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const thumbnailJobRef = (0, import_react6.useRef)(0);
+  (0, import_react6.useEffect)(() => {
     let active = true;
     const thumbnailJobId = thumbnailJobRef.current + 1;
     thumbnailJobRef.current = thumbnailJobId;
@@ -6704,7 +7023,7 @@ function PdfRenderer(props) {
     } catch (e) {
     }
   };
-  const pagesToRender = (0, import_react5.useMemo)(() => {
+  const pagesToRender = (0, import_react6.useMemo)(() => {
     if (!doc) return [];
     const p = Math.max(1, Math.min(currentPage, doc.numPages));
     if (layout === "side-by-side" && doc.numPages > 1) {
@@ -6715,16 +7034,16 @@ function PdfRenderer(props) {
     return [p];
   }, [doc, currentPage, layout]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hv-page-container", style: { padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hv-error-banner", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: props.locale["documents.pdfLoadErrorTitle"] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: error })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hv-page-container", style: { padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hv-error-banner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: props.locale["documents.pdfLoadErrorTitle"] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: error })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: `hv-doc-scroll ${layout === "side-by-side" ? "hv-view-double" : "hv-view-single"}`,
-      children: pagesToRender.map((page) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: pagesToRender.map((page) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         PdfPage,
         {
           doc,
@@ -6741,8 +7060,8 @@ function PdfPage({
   pageNum,
   signatureOverlay
 }) {
-  const canvasRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const canvasRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (!doc || !canvasRef.current) return;
     let active = true;
     const render = async () => {
@@ -6768,7 +7087,7 @@ function PdfPage({
       active = false;
     };
   }, [doc, pageNum]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: "hv-page-container",
@@ -6779,8 +7098,8 @@ function PdfPage({
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("canvas", { ref: canvasRef, className: "hv-pdf-canvas" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("canvas", { ref: canvasRef, className: "hv-pdf-canvas" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           SignatureOverlay,
           {
             surfaceKey: `page:${pageNum}`,
@@ -6822,9 +7141,9 @@ function PdfPage({
 }
 
 // src/renderers/PptxRenderer.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jszip2 = __toESM(require("jszip"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var NS_P = "http://schemas.openxmlformats.org/presentationml/2006/main";
 var NS_A = "http://schemas.openxmlformats.org/drawingml/2006/main";
 var NS_R = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
@@ -6845,11 +7164,11 @@ function isBrowserRenderableSlideImage(source) {
   return !/^data:image\/(?:emf|wmf|tiff)/i.test(source);
 }
 function PresentationImage(props) {
-  const [failed, setFailed] = (0, import_react6.useState)(!isBrowserRenderableSlideImage(props.src));
+  const [failed, setFailed] = (0, import_react7.useState)(!isBrowserRenderableSlideImage(props.src));
   if (failed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hv-slide-image-fallback", children: props.alt });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-slide-image-fallback", children: props.alt });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "img",
     {
       src: props.src,
@@ -7112,12 +7431,12 @@ function makeSlideThumbnail(slide, index) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
 }
 function PptxRenderer(props) {
-  const [slides, setSlides] = (0, import_react6.useState)([]);
-  const [slideSize, setSlideSize] = (0, import_react6.useState)({ width: 9144e3, height: 5143500 });
-  const [error, setError] = (0, import_react6.useState)(null);
-  const viewRef = (0, import_react6.useRef)(null);
-  const [viewWidth, setViewWidth] = (0, import_react6.useState)(SLIDE_RENDER_MAX_VIEW_WIDTH);
-  (0, import_react6.useEffect)(() => {
+  const [slides, setSlides] = (0, import_react7.useState)([]);
+  const [slideSize, setSlideSize] = (0, import_react7.useState)({ width: 9144e3, height: 5143500 });
+  const [error, setError] = (0, import_react7.useState)(null);
+  const viewRef = (0, import_react7.useRef)(null);
+  const [viewWidth, setViewWidth] = (0, import_react7.useState)(SLIDE_RENDER_MAX_VIEW_WIDTH);
+  (0, import_react7.useEffect)(() => {
     if (!props.arrayBuffer) {
       setSlides([]);
       props.onPageCount(1);
@@ -7169,7 +7488,7 @@ function PptxRenderer(props) {
     };
     loadPptx();
   }, [props.arrayBuffer, props.onExportStateChange]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const host = viewRef.current;
     if (!host || typeof ResizeObserver === "undefined") {
       return;
@@ -7183,7 +7502,7 @@ function PptxRenderer(props) {
     observer.observe(host);
     return () => observer.disconnect();
   }, []);
-  const pagesToShow = (0, import_react6.useMemo)(() => {
+  const pagesToShow = (0, import_react7.useMemo)(() => {
     if (slides.length === 0) {
       return [];
     }
@@ -7197,7 +7516,7 @@ function PptxRenderer(props) {
     }
     return [validPage];
   }, [slides.length, props.currentPage, props.layout]);
-  const slideViewportWidth = (0, import_react6.useMemo)(() => {
+  const slideViewportWidth = (0, import_react7.useMemo)(() => {
     const boundedWidth = Math.max(
       SLIDE_RENDER_MIN_VIEW_WIDTH,
       Math.min(viewWidth, SLIDE_RENDER_MAX_VIEW_WIDTH * 2 + SLIDE_RENDER_GAP)
@@ -7217,9 +7536,9 @@ function PptxRenderer(props) {
   const sceneHeight = Math.max(1, Math.round(slideSize.height * sceneCoordScale));
   const sceneScale = slideViewportWidth / SLIDE_RENDER_BASE_WIDTH;
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hv-error-banner", children: error });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-error-banner", children: error });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       ref: viewRef,
@@ -7229,7 +7548,7 @@ function PptxRenderer(props) {
         if (!slide) {
           return null;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             className: "hv-page-container hv-slide-surface",
@@ -7237,12 +7556,12 @@ function PptxRenderer(props) {
               aspectRatio: `${slideSize.width}/${slideSize.height}`,
               width: props.layout === "side-by-side" && pagesToShow.length > 1 ? `${slideViewportWidth}px` : void 0
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
                 className: "hv-slide-stage",
                 style: { background: slide.background || "#ffffff" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                   "div",
                   {
                     className: "hv-slide-scene",
@@ -7252,7 +7571,7 @@ function PptxRenderer(props) {
                       transform: `scale(${sceneScale})`
                     },
                     children: [
-                      slide.elements.map((element) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      slide.elements.map((element) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "div",
                         {
                           className: `hv-slide-element ${element.kind}`,
@@ -7265,20 +7584,20 @@ function PptxRenderer(props) {
                             background: element.kind === "shape" ? element.fill || "transparent" : void 0,
                             borderColor: element.stroke
                           },
-                          children: element.kind === "image" && element.imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          children: element.kind === "image" && element.imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             PresentationImage,
                             {
                               src: element.imageSrc,
                               alt: element.alt || "Slide image"
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hv-slide-textbox", children: element.paragraphs?.map((paragraph, paragraphIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-slide-textbox", children: element.paragraphs?.map((paragraph, paragraphIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                             "p",
                             {
                               className: `hv-slide-paragraph ${alignToClassName(paragraph.align)}`,
                               style: { paddingInlineStart: `${paragraph.level * 18}px` },
                               children: [
-                                paragraph.bullet && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hv-slide-bullet", children: "\u2022" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hv-slide-paragraph-copy", children: paragraph.runs.map((run, runIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                                paragraph.bullet && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hv-slide-bullet", children: "\u2022" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hv-slide-paragraph-copy", children: paragraph.runs.map((run, runIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                   "span",
                                   {
                                     style: {
@@ -7303,7 +7622,7 @@ function PptxRenderer(props) {
                         },
                         element.id
                       )),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         SignatureOverlay,
                         {
                           surfaceKey: `slide:${pageNumber}`,
@@ -7479,8 +7798,8 @@ var defaultLocale = {
 
 // src/components/SignaturePanel.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function sameSignature(left, right) {
   if (left.id && right.id) {
     return left.id === right.id;
@@ -7550,12 +7869,12 @@ function SignaturePanel(props) {
     onSignRequest,
     locale
   } = props;
-  const canvasRef = (0, import_react7.useRef)(null);
-  const [localSignatures, setLocalSignatures] = (0, import_react7.useState)([]);
-  const [showModal, setShowModal] = (0, import_react7.useState)(false);
-  const [isDrawing, setIsDrawing] = (0, import_react7.useState)(false);
-  const [hasInk, setHasInk] = (0, import_react7.useState)(false);
-  const signatures = (0, import_react7.useMemo)(() => {
+  const canvasRef = (0, import_react8.useRef)(null);
+  const [localSignatures, setLocalSignatures] = (0, import_react8.useState)([]);
+  const [showModal, setShowModal] = (0, import_react8.useState)(false);
+  const [isDrawing, setIsDrawing] = (0, import_react8.useState)(false);
+  const [hasInk, setHasInk] = (0, import_react8.useState)(false);
+  const signatures = (0, import_react8.useMemo)(() => {
     const merged = [];
     for (const signature of [...externalSignatures, ...localSignatures]) {
       if (!merged.some((item) => sameSignature(item, signature))) {
@@ -7651,34 +7970,34 @@ function SignaturePanel(props) {
     ctx.lineTo(x, y);
     ctx.stroke();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: `hv-sidebar hv-sidebar-right ${!isOpen ? "collapsed" : ""}`,
         style: { width: isOpen ? "300px" : "0" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "div",
             {
               className: "hv-sidebar-header",
               style: { justifyContent: "space-between", padding: "12px 16px" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { margin: 0, fontSize: "15px", fontWeight: 600 }, children: locale["signatures.title"] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { margin: 0, fontSize: "15px", fontWeight: 600 }, children: locale["signatures.title"] }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     onClick: onClose,
                     className: "hv-btn",
                     style: { padding: "4px", border: "none" },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.X, { size: 18 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.X, { size: 18 })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-thumb-list", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-thumb-list", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "button",
               {
                 onClick: handleCreateClick,
@@ -7691,25 +8010,26 @@ function SignaturePanel(props) {
                   color: "var(--hv-primary)"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Plus, { size: 18, style: { marginRight: "8px" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Plus, { size: 18, style: { marginRight: "8px" } }),
                   locale["signatures.new"]
                 ]
               }
             ),
-            selectedSignature && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-signature-selection-card", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-signature-selection-title", children: locale["signatures.ready"] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "img",
+            selectedSignature && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-signature-selection-card", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-signature-selection-title", children: locale["signatures.ready"] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                RenderableSignatureImage,
                 {
-                  src: selectedSignature.signatureImageUrl,
+                  signatureImageUrl: selectedSignature.signatureImageUrl,
+                  inkColor: selectedColor,
                   alt: selectedSignature.signedBy ? `Selected signature by ${selectedSignature.signedBy}` : "Selected signature",
                   className: "hv-signature-selection-image"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-signature-selection-copy", children: locale["signatures.placeHint"] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-signature-color-picker", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hv-signature-color-picker-label", children: locale["signatures.color"] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-signature-selection-copy", children: locale["signatures.placeHint"] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-signature-color-picker", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hv-signature-color-picker-label", children: locale["signatures.color"] }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -7722,7 +8042,7 @@ function SignaturePanel(props) {
                   color
                 )) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "button",
                 {
                   type: "button",
@@ -7733,45 +8053,46 @@ function SignaturePanel(props) {
                 }
               )
             ] }),
-            signatures.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-signature-empty", children: locale["signatures.empty"] }),
+            signatures.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-signature-empty", children: locale["signatures.empty"] }),
             signatures.map((signature, index) => {
               const isLocal = localSignatures.some(
                 (item) => sameSignature(item, signature)
               );
               const isSelected = selectedSignature ? sameSignature(selectedSignature, signature) : false;
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "div",
                 {
                   className: `hv-thumb-item hv-signature-item ${isSelected ? "active" : ""}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       "button",
                       {
                         type: "button",
                         className: "hv-signature-item-main",
                         onClick: () => onSelectSignature(signature),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-signature-item-stack", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                              "img",
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-signature-item-stack", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                              RenderableSignatureImage,
                               {
-                                src: signature.signatureImageUrl,
+                                signatureImageUrl: signature.signatureImageUrl,
+                                inkColor: "black",
                                 alt: signature.signedBy ? `Signature by ${signature.signedBy}` : "Signature",
                                 className: "hv-signature-item-image"
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-signature-item-copy", children: [
-                              signature.signedBy && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: signature.signedBy }),
-                              signature.jobTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: signature.jobTitle }),
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: normalizeSignatureDate(signature.dateSigned) }),
-                              signature.comment && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("em", { children: signature.comment })
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-signature-item-copy", children: [
+                              signature.signedBy && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: signature.signedBy }),
+                              signature.jobTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: signature.jobTitle }),
+                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: normalizeSignatureDate(signature.dateSigned) }),
+                              signature.comment && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("em", { children: signature.comment })
                             ] })
                           ] }),
-                          isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hv-signature-item-check", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Check, { size: 14 }) })
+                          isSelected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hv-signature-item-check", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Check, { size: 14 }) })
                         ]
                       }
                     ),
-                    isLocal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    isLocal && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "button",
                       {
                         type: "button",
@@ -7794,7 +8115,7 @@ function SignaturePanel(props) {
                             onClearSelection();
                           }
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Trash2, { size: 12 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Trash2, { size: 12 })
                       }
                     )
                   ]
@@ -7806,8 +8127,8 @@ function SignaturePanel(props) {
         ]
       }
     ),
-    showModal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-modal-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-modal", style: { width: "450px", maxWidth: "90vw" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    showModal && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-modal-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-modal", style: { width: "450px", maxWidth: "90vw" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           style: {
@@ -7818,20 +8139,20 @@ function SignaturePanel(props) {
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: locale["signatures.drawTitle"] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: locale["signatures.drawTitle"] }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 onClick: () => setShowModal(false),
                 className: "hv-btn",
                 style: { border: "none" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.X, { size: 20 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.X, { size: 20 })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           style: {
@@ -7842,7 +8163,7 @@ function SignaturePanel(props) {
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "div",
               {
                 style: {
@@ -7852,7 +8173,7 @@ function SignaturePanel(props) {
                   overflow: "hidden",
                   boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.05)"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "canvas",
                   {
                     ref: canvasRef,
@@ -7874,7 +8195,7 @@ function SignaturePanel(props) {
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "p",
               {
                 style: {
@@ -7888,7 +8209,7 @@ function SignaturePanel(props) {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           style: {
@@ -7899,8 +8220,8 @@ function SignaturePanel(props) {
             gap: "12px"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: clearCanvas, className: "hv-btn", children: locale["signatures.clear"] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: clearCanvas, className: "hv-btn", children: locale["signatures.clear"] }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 onClick: saveSignature,
@@ -7917,16 +8238,16 @@ function SignaturePanel(props) {
 }
 
 // src/components/ThumbnailsSidebar.tsx
-var import_react8 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var THUMB_ITEM_HEIGHT = 184;
 var THUMB_OVERSCAN = 4;
 function ThumbnailsSidebar(props) {
   const { isOpen, thumbnails, currentPage, onSelectPage, locale } = props;
-  const listRef = (0, import_react8.useRef)(null);
-  const [scrollTop, setScrollTop] = (0, import_react8.useState)(0);
-  const [viewportHeight, setViewportHeight] = (0, import_react8.useState)(0);
-  (0, import_react8.useEffect)(() => {
+  const listRef = (0, import_react9.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react9.useState)(0);
+  const [viewportHeight, setViewportHeight] = (0, import_react9.useState)(0);
+  (0, import_react9.useEffect)(() => {
     const element = listRef.current;
     if (!element || !isOpen) {
       return;
@@ -7947,7 +8268,7 @@ function ThumbnailsSidebar(props) {
       behavior: "smooth"
     });
   }, [currentPage, isOpen]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const element = listRef.current;
     if (!element) {
       return;
@@ -7976,7 +8297,7 @@ function ThumbnailsSidebar(props) {
       window.removeEventListener("resize", updateViewport);
     };
   }, []);
-  const virtualWindow = (0, import_react8.useMemo)(() => {
+  const virtualWindow = (0, import_react9.useMemo)(() => {
     if (thumbnails.length === 0) {
       return {
         startIndex: 0,
@@ -8002,15 +8323,15 @@ function ThumbnailsSidebar(props) {
       totalHeight: thumbnails.length * THUMB_ITEM_HEIGHT
     };
   }, [scrollTop, thumbnails.length, viewportHeight]);
-  const visibleItems = (0, import_react8.useMemo)(
+  const visibleItems = (0, import_react9.useMemo)(
     () => thumbnails.slice(
       virtualWindow.startIndex,
       virtualWindow.endIndex >= virtualWindow.startIndex ? virtualWindow.endIndex + 1 : virtualWindow.startIndex
     ),
     [thumbnails, virtualWindow.endIndex, virtualWindow.startIndex]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `hv-sidebar ${!isOpen ? "collapsed" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: listRef, className: "hv-thumb-list", children: [
-    thumbnails.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `hv-sidebar ${!isOpen ? "collapsed" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: listRef, className: "hv-thumb-list", children: [
+    thumbnails.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         className: "hv-thumb-viewport",
@@ -8019,22 +8340,22 @@ function ThumbnailsSidebar(props) {
           const absoluteIndex = virtualWindow.startIndex + index;
           const pageNum = absoluteIndex + 1;
           const isActive = pageNum === currentPage;
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "div",
             {
               className: `hv-thumb-item ${isActive ? "active" : ""}`,
               style: { top: `${absoluteIndex * THUMB_ITEM_HEIGHT}px` },
               onClick: () => onSelectPage(pageNum),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-thumb-preview", children: src ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hv-thumb-preview", children: src ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "img",
                   {
                     src,
                     alt: `Page ${pageNum}`,
                     className: "hv-thumb-img"
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-thumb-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "..." }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "hv-thumb-label", children: [
+                ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hv-thumb-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "..." }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "hv-thumb-label", children: [
                   locale["thumbnails.page"],
                   " ",
                   pageNum
@@ -8046,13 +8367,13 @@ function ThumbnailsSidebar(props) {
         })
       }
     ),
-    thumbnails.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-thumb-empty", children: locale["thumbnails.empty"] })
+    thumbnails.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hv-thumb-empty", children: locale["thumbnails.empty"] })
   ] }) });
 }
 
 // src/components/Toolbar.tsx
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Toolbar(props) {
   const {
     fileName,
@@ -8088,18 +8409,18 @@ function Toolbar(props) {
       onPageChange(val);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hv-toolbar", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hv-toolbar-group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-toolbar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-toolbar-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: `hv-btn ${props.showThumbnails ? "hv-btn-active" : ""}`,
           onClick: props.onToggleThumbnails,
           title: locale["toolbar.thumbs"],
-          children: props.showThumbnails ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.PanelLeftClose, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.PanelLeftOpen, { size: 20 })
+          children: props.showThumbnails ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.PanelLeftClose, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.PanelLeftOpen, { size: 20 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
           className: "hv-sep",
@@ -8111,7 +8432,7 @@ function Toolbar(props) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "span",
         {
           style: {
@@ -8126,18 +8447,18 @@ function Toolbar(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hv-toolbar-group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-toolbar-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: "hv-btn",
           disabled: currentPage <= 1,
           onClick: handlePrev,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronLeft, { size: 20 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ChevronLeft, { size: 20 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hv-toolbar-page-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-toolbar-page-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "input",
           {
             type: "number",
@@ -8148,53 +8469,53 @@ function Toolbar(props) {
             max: pageCount
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hv-toolbar-page-sep", children: "/" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: pageCount })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hv-toolbar-page-sep", children: "/" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: pageCount })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: "hv-btn",
           disabled: currentPage >= pageCount,
           onClick: handleNext,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronRight, { size: 20 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ChevronRight, { size: 20 })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hv-toolbar-group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-toolbar-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: "hv-btn",
           onClick: onZoomOut,
           title: locale["toolbar.zoomOut"],
           disabled: zoom <= 0.5,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ZoomOut, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ZoomOut, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: "hv-btn",
           onClick: onZoomReset,
           title: locale["toolbar.zoomReset"],
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { fontSize: "12px", fontWeight: 600 }, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { fontSize: "12px", fontWeight: 600 }, children: [
             Math.round(zoom * 100),
             "%"
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: "hv-btn",
           onClick: onZoomIn,
           title: locale["toolbar.zoomIn"],
           disabled: zoom >= 2,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ZoomIn, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ZoomIn, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
           className: "hv-sep",
@@ -8206,37 +8527,37 @@ function Toolbar(props) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: `hv-btn ${layout === "single" ? "hv-btn-active" : ""}`,
           onClick: () => onLayoutChange("single"),
           title: locale["toolbar.layout.single"],
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.LayoutTemplate, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.LayoutTemplate, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: `hv-btn ${layout === "side-by-side" ? "hv-btn-active" : ""}`,
           onClick: () => onLayoutChange("side-by-side"),
           title: locale["toolbar.layout.two"],
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Grid2X2, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Grid2X2, { size: 18 })
         }
       ),
-      showHeaderFooterToggle && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      showHeaderFooterToggle && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "button",
         {
           className: `hv-btn ${headerFooterVisible ? "hv-btn-active" : ""}`,
           onClick: onToggleHeaderFooter,
           title: locale["toolbar.headerFooter"],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "12px", fontWeight: 700, marginRight: "8px" }, children: "HF" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.headerFooter"] })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: "12px", fontWeight: 700, marginRight: "8px" }, children: "HF" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.headerFooter"] })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
           className: "hv-sep",
@@ -8248,18 +8569,18 @@ function Toolbar(props) {
           }
         }
       ),
-      saveEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        showExportPdfAction && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      saveEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        showExportPdfAction && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
           {
             className: "hv-btn",
             onClick: onExportPdf,
             title: locale["toolbar.exportPdf"],
             disabled: isSaving,
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.FileDown, { size: 18 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.FileDown, { size: 18 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "button",
           {
             className: "hv-btn hv-btn-primary",
@@ -8267,12 +8588,12 @@ function Toolbar(props) {
             title: saveLabel ?? locale["toolbar.save"],
             disabled: isSaving,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Save, { size: 18, style: { marginRight: "8px" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hv-btn-label", children: isSaving ? locale.loading : saveLabel ?? locale["toolbar.save"] })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Save, { size: 18, style: { marginRight: "8px" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hv-btn-label", children: isSaving ? locale.loading : saveLabel ?? locale["toolbar.save"] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             className: "hv-sep",
@@ -8285,27 +8606,27 @@ function Toolbar(props) {
           }
         )
       ] }),
-      props.annotationEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      props.annotationEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "button",
         {
           className: `hv-btn ${props.annotationMode ? "hv-btn-active" : ""}`,
           onClick: props.onToggleAnnotationMode,
           title: locale["toolbar.annotate"],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.MessageSquarePlus, { size: 18, style: { marginRight: "8px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.annotate"] })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.MessageSquarePlus, { size: 18, style: { marginRight: "8px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.annotate"] })
           ]
         }
       ),
-      props.signingEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      props.signingEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "button",
         {
           className: `hv-btn hv-btn-primary ${props.showSignatures ? "hv-btn-active" : ""}`,
           onClick: props.onToggleSignatures,
           title: locale["toolbar.sign"],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.PenLine, { size: 18, style: { marginRight: "8px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.sign"] })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.PenLine, { size: 18, style: { marginRight: "8px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.sign"] })
           ]
         }
       )
@@ -8314,7 +8635,7 @@ function Toolbar(props) {
 }
 
 // src/components/DocumentViewer.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function createPlacementId() {
   return `sig-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 }
@@ -8398,56 +8719,56 @@ function getFileNameHint(fileUrl, fileName) {
 function DocumentViewer(props) {
   const mode = props.mode ?? "view";
   const theme = props.theme ?? "light";
-  const locale = (0, import_react9.useMemo)(
+  const locale = (0, import_react10.useMemo)(
     () => ({ ...defaultLocale, ...props.locale }),
     [props.locale]
   );
-  const [layout, setLayout] = (0, import_react9.useState)(
+  const [layout, setLayout] = (0, import_react10.useState)(
     props.defaultLayout ?? "single"
   );
-  const [showThumbnails, setShowThumbnails] = (0, import_react9.useState)(
+  const [showThumbnails, setShowThumbnails] = (0, import_react10.useState)(
     props.defaultShowThumbnails ?? true
   );
-  const [showHeaderFooterSlots, setShowHeaderFooterSlots] = (0, import_react9.useState)(true);
-  const [showSignatures, setShowSignatures] = (0, import_react9.useState)(false);
-  const [zoom, setZoom] = (0, import_react9.useState)(1);
-  const mainRef = (0, import_react9.useRef)(null);
-  const zoomStageRef = (0, import_react9.useRef)(null);
-  const exportHeaderRef = (0, import_react9.useRef)(null);
-  const exportFooterRef = (0, import_react9.useRef)(null);
-  const [selectedSignature, setSelectedSignature] = (0, import_react9.useState)(
+  const [showHeaderFooterSlots, setShowHeaderFooterSlots] = (0, import_react10.useState)(true);
+  const [showSignatures, setShowSignatures] = (0, import_react10.useState)(false);
+  const [zoom, setZoom] = (0, import_react10.useState)(1);
+  const mainRef = (0, import_react10.useRef)(null);
+  const zoomStageRef = (0, import_react10.useRef)(null);
+  const exportHeaderRef = (0, import_react10.useRef)(null);
+  const exportFooterRef = (0, import_react10.useRef)(null);
+  const [selectedSignature, setSelectedSignature] = (0, import_react10.useState)(
     null
   );
-  const [selectedSignatureColor, setSelectedSignatureColor] = (0, import_react9.useState)("black");
-  const [isPlacingAnnotation, setIsPlacingAnnotation] = (0, import_react9.useState)(false);
-  const [activePlacementId, setActivePlacementId] = (0, import_react9.useState)(
+  const [selectedSignatureColor, setSelectedSignatureColor] = (0, import_react10.useState)("black");
+  const [isPlacingAnnotation, setIsPlacingAnnotation] = (0, import_react10.useState)(false);
+  const [activePlacementId, setActivePlacementId] = (0, import_react10.useState)(
     null
   );
-  const [activeAnnotationId, setActiveAnnotationId] = (0, import_react9.useState)(
+  const [activeAnnotationId, setActiveAnnotationId] = (0, import_react10.useState)(
     null
   );
-  const [resolved, setResolved] = (0, import_react9.useState)(null);
-  const [loading, setLoading] = (0, import_react9.useState)(true);
-  const [error, setError] = (0, import_react9.useState)("");
-  const [isSaving, setIsSaving] = (0, import_react9.useState)(false);
-  const [pageCount, setPageCount] = (0, import_react9.useState)(1);
-  const [currentPage, setCurrentPage] = (0, import_react9.useState)(1);
-  const [thumbnails, setThumbnails] = (0, import_react9.useState)([]);
-  const [richTextExportState, setRichTextExportState] = (0, import_react9.useState)(null);
-  const [spreadsheetExportState, setSpreadsheetExportState] = (0, import_react9.useState)(null);
-  const [pptxExportState, setPptxExportState] = (0, import_react9.useState)(null);
-  const [internalPlacements, setInternalPlacements] = (0, import_react9.useState)(props.signaturePlacements ?? []);
-  const [internalAnnotations, setInternalAnnotations] = (0, import_react9.useState)(props.annotations ?? []);
-  const [zoomStageSize, setZoomStageSize] = (0, import_react9.useState)({ width: 0, height: 0 });
-  const [mainContentWidth, setMainContentWidth] = (0, import_react9.useState)(0);
-  const placements = (0, import_react9.useMemo)(
+  const [resolved, setResolved] = (0, import_react10.useState)(null);
+  const [loading, setLoading] = (0, import_react10.useState)(true);
+  const [error, setError] = (0, import_react10.useState)("");
+  const [isSaving, setIsSaving] = (0, import_react10.useState)(false);
+  const [pageCount, setPageCount] = (0, import_react10.useState)(1);
+  const [currentPage, setCurrentPage] = (0, import_react10.useState)(1);
+  const [thumbnails, setThumbnails] = (0, import_react10.useState)([]);
+  const [richTextExportState, setRichTextExportState] = (0, import_react10.useState)(null);
+  const [spreadsheetExportState, setSpreadsheetExportState] = (0, import_react10.useState)(null);
+  const [pptxExportState, setPptxExportState] = (0, import_react10.useState)(null);
+  const [internalPlacements, setInternalPlacements] = (0, import_react10.useState)(props.signaturePlacements ?? []);
+  const [internalAnnotations, setInternalAnnotations] = (0, import_react10.useState)(props.annotations ?? []);
+  const [zoomStageSize, setZoomStageSize] = (0, import_react10.useState)({ width: 0, height: 0 });
+  const [mainContentWidth, setMainContentWidth] = (0, import_react10.useState)(0);
+  const placements = (0, import_react10.useMemo)(
     () => (props.signaturePlacements ?? internalPlacements).map(
       (placement) => normalizeSignaturePlacement(placement)
     ),
     [internalPlacements, props.signaturePlacements]
   );
   const annotations = props.annotations ?? internalAnnotations;
-  const availableSignatures = (0, import_react9.useMemo)(
+  const availableSignatures = (0, import_react10.useMemo)(
     () => (props.signatures ?? []).map((signature) => normalizeSignature(signature)),
     [props.signatures]
   );
@@ -8482,7 +8803,7 @@ function DocumentViewer(props) {
   const isRichTextAuthoringMode = Boolean(
     resolved && ["docx", "doc", "rtf", "txt", "md"].includes(resolved.fileType) && effectiveMode !== "view"
   );
-  const finalizedSignatures = (0, import_react9.useMemo)(() => {
+  const finalizedSignatures = (0, import_react10.useMemo)(() => {
     const seen = /* @__PURE__ */ new Set();
     return placements.flatMap((placement) => {
       const signature = placement.signature;
@@ -8494,7 +8815,7 @@ function DocumentViewer(props) {
       return [signature];
     });
   }, [placements]);
-  const signatureList = (0, import_react9.useMemo)(
+  const signatureList = (0, import_react10.useMemo)(
     () => placements.map((placement) => ({
       placementId: placement.id,
       signatureId: placement.signatureId,
@@ -8509,41 +8830,41 @@ function DocumentViewer(props) {
     })),
     [placements]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (props.signaturePlacements) {
       setInternalPlacements(props.signaturePlacements);
     }
   }, [props.signaturePlacements]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (props.annotations) {
       setInternalAnnotations(props.annotations);
     }
   }, [props.annotations]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setShowThumbnails(props.defaultShowThumbnails ?? true);
   }, [props.defaultShowThumbnails]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setLayout(props.defaultLayout ?? "single");
   }, [props.defaultLayout]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!signingEnabled) {
       setShowSignatures(false);
       setSelectedSignature(null);
       setActivePlacementId(null);
     }
   }, [signingEnabled]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!annotationEnabled) {
       setIsPlacingAnnotation(false);
       setActiveAnnotationId(null);
     }
   }, [annotationEnabled]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!headerFooterToggleEnabled) {
       setShowHeaderFooterSlots(true);
     }
   }, [headerFooterToggleEnabled]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     let active = true;
     let cleanupSource;
     const loadFile = async () => {
@@ -8602,7 +8923,7 @@ function DocumentViewer(props) {
     props.fileUrl,
     requestedFileType
   ]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setZoom(1);
     setCurrentPage(1);
     setSelectedSignature(null);
@@ -8620,7 +8941,7 @@ function DocumentViewer(props) {
       setInternalAnnotations([]);
     }
   }, [mode, props.fileUrl, props.fileName, props.fileType, props.blob, props.base64]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const element = zoomStageRef.current;
     if (!element) {
       return;
@@ -8678,7 +8999,7 @@ function DocumentViewer(props) {
     showSignatures,
     showThumbnails
   ]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const element = mainRef.current;
     if (!element) {
       return;
@@ -8712,7 +9033,7 @@ function DocumentViewer(props) {
       window.removeEventListener("resize", scheduleMeasure);
     };
   }, []);
-  const zoomShellStyle = (0, import_react9.useMemo)(
+  const zoomShellStyle = (0, import_react10.useMemo)(
     () => {
       const baseWidth = isRichTextAuthoringMode && mainContentWidth > 0 ? mainContentWidth : zoomStageSize.width;
       return {
@@ -8723,7 +9044,7 @@ function DocumentViewer(props) {
     },
     [isRichTextAuthoringMode, mainContentWidth, zoom, zoomStageSize.height, zoomStageSize.width]
   );
-  const zoomStageStyle = (0, import_react9.useMemo)(
+  const zoomStageStyle = (0, import_react10.useMemo)(
     () => {
       const baseWidth = isRichTextAuthoringMode && mainContentWidth > 0 ? mainContentWidth : zoomStageSize.width;
       return {
@@ -8869,7 +9190,7 @@ function DocumentViewer(props) {
       }
     }
   };
-  const saveReady = (0, import_react9.useMemo)(() => {
+  const saveReady = (0, import_react10.useMemo)(() => {
     if (!resolved) {
       return false;
     }
@@ -8904,7 +9225,7 @@ function DocumentViewer(props) {
     spreadsheetExportState
   ]);
   const saveEnabled = Boolean(props.onSave) && Boolean(resolved) && !loading && saveReady;
-  const exportLabels = (0, import_react9.useMemo)(
+  const exportLabels = (0, import_react10.useMemo)(
     () => ({
       annotationTitle: locale["annotations.title"],
       linkedAnnotationTitle: locale["annotations.linkedTitle"],
@@ -9058,20 +9379,20 @@ function DocumentViewer(props) {
   };
   const renderContent = () => {
     if (error) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-error-banner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: locale["error.title"] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: error })
-      ] });
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-status-shell", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-error-banner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: locale["error.title"] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: error })
+      ] }) });
     }
     if (loading || !resolved) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-loader", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hv-spinner" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: locale.loading })
-      ] });
-    }
-    const renderCapabilityNotice = (title, description, variant = "info") => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `hv-info-banner${variant === "warning" ? " warning" : ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: description })
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-status-shell", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-loader", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-spinner" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: locale.loading })
+      ] }) });
+    }
+    const renderCapabilityNotice = (title, description, variant = "info") => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `hv-info-banner${variant === "warning" ? " warning" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: description })
     ] });
     const shouldShowModeAdjustedNotice = showModeFallbackNotice || showCreateUnsupportedNotice && hasRenderableSource;
     const modeAdjustedNotice = shouldShowModeAdjustedNotice ? renderCapabilityNotice(
@@ -9082,7 +9403,7 @@ function DocumentViewer(props) {
       ).replace("{fileType}", getReadableFileTypeLabel(resolved.fileType))
     ) : null;
     if (showCreateUnsupportedNotice && !hasRenderableSource) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hv-page-container", style: { padding: "32px" }, children: renderCapabilityNotice(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-page-container", style: { padding: "32px" }, children: renderCapabilityNotice(
         locale["documents.createUnsupportedTitle"],
         locale["documents.createUnsupportedDescription"].replace(
           "{formats}",
@@ -9105,9 +9426,9 @@ function DocumentViewer(props) {
     };
     switch (resolved.fileType) {
       case "pdf":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             PdfRenderer,
             {
               url: resolved.url,
@@ -9121,9 +9442,9 @@ function DocumentViewer(props) {
       case "rtf":
       case "txt":
       case "md":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             RichTextEditor,
             {
               mode: effectiveMode,
@@ -9135,9 +9456,9 @@ function DocumentViewer(props) {
       case "xlsx":
       case "csv":
       case "xls":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             SpreadsheetEditor,
             {
               mode: effectiveMode,
@@ -9148,9 +9469,9 @@ function DocumentViewer(props) {
         ] });
       case "pptx":
       case "ppt":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             PptxRenderer,
             {
               onExportStateChange: setPptxExportState,
@@ -9164,20 +9485,20 @@ function DocumentViewer(props) {
       case "gif":
       case "bmp":
       case "svg":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageRenderer, { ...commonProps, fileType: resolved.fileType })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ImageRenderer, { ...commonProps, fileType: resolved.fileType })
         ] });
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-error-banner", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-status-shell", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-error-banner", children: [
           locale["documents.unsupportedFileType"],
           ": ",
           resolved.fileType
-        ] });
+        ] }) });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-root", "data-hv-theme": theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-root", "data-hv-theme": theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Toolbar,
       {
         fileName: resolved?.fileName,
@@ -9224,8 +9545,8 @@ function DocumentViewer(props) {
         locale
       }
     ),
-    (props.headerComponent || props.footerComponent) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-export-slot-host", "aria-hidden": "true", children: [
-      props.headerComponent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    (props.headerComponent || props.footerComponent) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-export-slot-host", "aria-hidden": "true", children: [
+      props.headerComponent && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           ref: exportHeaderRef,
@@ -9233,7 +9554,7 @@ function DocumentViewer(props) {
           children: props.headerComponent
         }
       ),
-      props.footerComponent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      props.footerComponent && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           ref: exportFooterRef,
@@ -9242,8 +9563,8 @@ function DocumentViewer(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-shell", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-shell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         ThumbnailsSidebar,
         {
           isOpen: showThumbnails,
@@ -9253,15 +9574,15 @@ function DocumentViewer(props) {
           locale
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "main",
         {
           ref: mainRef,
           className: `hv-main${isRichTextAuthoringMode ? " hv-main-richtext-authoring" : ""}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hv-zoom-shell", style: zoomShellStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: zoomStageRef, className: "hv-zoom-stage", style: zoomStageStyle, children: renderContent() }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-zoom-shell", style: zoomShellStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: zoomStageRef, className: "hv-zoom-stage", style: zoomStageStyle, children: renderContent() }) })
         }
       ),
-      signingEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      signingEnabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         SignaturePanel,
         {
           isOpen: showSignatures,