npm - @zerohive/hive-viewer - Versions diffs - 2.0.1 → 2.0.3 - Mend

@zerohive/hive-viewer 2.0.1 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.mjs CHANGED Viewed

@@ -1,14 +1,17 @@
 // src/components/DocumentViewer.tsx
-import { useEffect as useEffect8, useMemo as useMemo9, useRef as useRef7, useState as useState8 } from "react";
+import { useEffect as useEffect9, useMemo as useMemo9, useRef as useRef7, useState as useState9 } from "react";
 // src/editors/RichTextEditor.tsx
 import mammoth from "mammoth";
-import { useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 import MarkdownIt from "markdown-it";
 // src/components/SignatureOverlay.tsx
 import { MessageSquare } from "lucide-react";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
+// src/components/RenderableSignatureImage.tsx
+import { useEffect, useState } from "react";
 // src/utils/signature.ts
 var SIGNATURE_INK_COLORS = [
@@ -89,8 +92,267 @@ function normalizeSignaturePlacement(placement) {
   };
 }
+// 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
+import { jsx } from "react/jsx-runtime";
+function RenderableSignatureImage(props) {
+  const { signatureImageUrl, inkColor, ...imageProps } = props;
+  const [resolvedSrc, setResolvedSrc] = useState(signatureImageUrl);
+  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__ */ jsx("img", { ...imageProps, src: resolvedSrc, decoding: "async", draggable: false });
+}
 // src/components/SignatureOverlay.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
@@ -123,9 +385,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,
@@ -163,7 +422,7 @@ function SignatureOverlay(props) {
     onSelectAnnotation
   } = props;
   const layerRef = useRef(null);
-  const [dragState, setDragState] = useState(null);
+  const [dragState, setDragState] = useState2(null);
   const visiblePlacements = useMemo(
     () => placements.filter((placement) => placement.surfaceKey === surfaceKey),
     [placements, surfaceKey]
@@ -177,7 +436,7 @@ function SignatureOverlay(props) {
     [visibleAnnotations]
   );
   const captureMode = pendingSignature ? "signature" : pendingAnnotation ? "annotation" : null;
-  useEffect(() => {
+  useEffect2(() => {
     if (captureMode || dragState) {
       return;
     }
@@ -196,7 +455,7 @@ function SignatureOverlay(props) {
       window.removeEventListener("pointerdown", handlePointerDown, true);
     };
   }, [captureMode, dragState, onSelectAnnotation, onSelectPlacement]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!dragState) {
       return;
     }
@@ -343,7 +602,7 @@ function SignatureOverlay(props) {
     });
   };
   return /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "hv-signature-overlay", children: [
-    captureMode && /* @__PURE__ */ jsx("div", { className: "hv-signature-overlay-capture", onClick: handlePlace, children: /* @__PURE__ */ jsx("div", { className: "hv-signature-overlay-hint", children: captureMode === "annotation" ? annotationHint : placeHint }) }),
+    captureMode && /* @__PURE__ */ jsx2("div", { className: "hv-signature-overlay-capture", onClick: handlePlace, children: /* @__PURE__ */ jsx2("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);
@@ -351,7 +610,6 @@ 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__ */ jsxs(
         "div",
         {
@@ -377,7 +635,7 @@ function SignatureOverlay(props) {
             onSelectAnnotation(null);
           },
           children: [
-            isActive && /* @__PURE__ */ jsx(
+            isActive && /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -393,25 +651,21 @@ function SignatureOverlay(props) {
                 children: "x"
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "hv-signature-image-wrap", children: /* @__PURE__ */ jsx(
-              "div",
+            /* @__PURE__ */ jsx2("div", { className: "hv-signature-image-wrap", children: /* @__PURE__ */ jsx2(
+              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__ */ jsxs("div", { className: "hv-signature-meta", children: [
-              signer && /* @__PURE__ */ jsx("span", { className: "hv-signature-meta-name", children: signer }),
-              jobTitle && /* @__PURE__ */ jsx("span", { className: "hv-signature-meta-jobtitle", children: jobTitle }),
-              /* @__PURE__ */ jsx("span", { className: "hv-signature-meta-date", children: signedDate })
+              signer && /* @__PURE__ */ jsx2("span", { className: "hv-signature-meta-name", children: signer }),
+              jobTitle && /* @__PURE__ */ jsx2("span", { className: "hv-signature-meta-jobtitle", children: jobTitle }),
+              /* @__PURE__ */ jsx2("span", { className: "hv-signature-meta-date", children: signedDate })
             ] }),
-            hasLinkedAnnotation && /* @__PURE__ */ jsx("div", { className: "hv-signature-note-indicator", children: signatureNoteIndicatorLabel }),
+            hasLinkedAnnotation && /* @__PURE__ */ jsx2("div", { className: "hv-signature-note-indicator", children: signatureNoteIndicatorLabel }),
             isActive && /* @__PURE__ */ jsxs(
               "div",
               {
@@ -423,8 +677,8 @@ function SignatureOverlay(props) {
                   event.stopPropagation();
                 },
                 children: [
-                  /* @__PURE__ */ jsx("span", { className: "hv-signature-color-toolbar-label", children: signatureColorLabel }),
-                  /* @__PURE__ */ jsx("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ jsx(
+                  /* @__PURE__ */ jsx2("span", { className: "hv-signature-color-toolbar-label", children: signatureColorLabel }),
+                  /* @__PURE__ */ jsx2("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ jsx2(
                     "button",
                     {
                       type: "button",
@@ -439,7 +693,7 @@ function SignatureOverlay(props) {
                 ]
               }
             ),
-            isActive && /* @__PURE__ */ jsx(
+            isActive && /* @__PURE__ */ jsx2(
               "div",
               {
                 className: "hv-signature-resize",
@@ -460,7 +714,7 @@ function SignatureOverlay(props) {
       const isLinked = Boolean(annotation.linkedSignaturePlacementId);
       const hasText = annotation.text.trim().length > 0;
       if (!isActive) {
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
@@ -476,7 +730,7 @@ function SignatureOverlay(props) {
               onSelectAnnotation(annotation.id);
               onSelectPlacement(null);
             },
-            children: /* @__PURE__ */ jsx(MessageSquare, { size: 14 })
+            children: /* @__PURE__ */ jsx2(MessageSquare, { size: 14 })
           },
           annotation.id
         );
@@ -516,10 +770,10 @@ function SignatureOverlay(props) {
                 },
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "hv-annotation-header-copy", children: [
-                    /* @__PURE__ */ jsx("span", { className: "hv-annotation-title", children: isLinked ? linkedAnnotationTitle : annotationTitle }),
-                    isLinked && /* @__PURE__ */ jsx("span", { className: "hv-annotation-badge", children: linkedAnnotationBadge })
+                    /* @__PURE__ */ jsx2("span", { className: "hv-annotation-title", children: isLinked ? linkedAnnotationTitle : annotationTitle }),
+                    isLinked && /* @__PURE__ */ jsx2("span", { className: "hv-annotation-badge", children: linkedAnnotationBadge })
                   ] }),
-                  isActive && /* @__PURE__ */ jsx(
+                  isActive && /* @__PURE__ */ jsx2(
                     "button",
                     {
                       type: "button",
@@ -538,7 +792,7 @@ function SignatureOverlay(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "hv-annotation-body", children: isActive ? /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx2("div", { className: "hv-annotation-body", children: isActive ? /* @__PURE__ */ jsx2(
               "textarea",
               {
                 value: annotation.text,
@@ -552,14 +806,14 @@ function SignatureOverlay(props) {
                   event.stopPropagation();
                 }
               }
-            ) : /* @__PURE__ */ jsx(
+            ) : /* @__PURE__ */ jsx2(
               "div",
               {
                 className: `hv-annotation-preview ${hasText ? "" : "empty"}`,
                 children: hasText ? annotation.text : annotationPlaceholder
               }
             ) }),
-            isActive && /* @__PURE__ */ jsx(
+            isActive && /* @__PURE__ */ jsx2(
               "div",
               {
                 className: "hv-annotation-resize",
@@ -1394,7 +1648,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));
@@ -1435,7 +1689,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 {
@@ -1786,7 +2040,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;
@@ -1986,7 +2240,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;
@@ -2033,19 +2287,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;
@@ -2055,12 +2296,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() || "";
@@ -2091,7 +2332,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,
@@ -2289,7 +2530,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.");
@@ -2298,7 +2539,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.");
@@ -2623,7 +2864,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;
@@ -2758,7 +2999,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;
@@ -2876,7 +3117,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();
@@ -3042,7 +3283,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;
@@ -3167,7 +3408,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;
@@ -3219,7 +3460,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.");
@@ -3263,7 +3504,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;
@@ -3620,13 +3861,13 @@ function sanitizeHtml(html) {
 }
 // src/editors/RichTextEditor.tsx
-import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "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));
@@ -3711,7 +3952,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";
@@ -3729,7 +3970,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;
@@ -3759,7 +4000,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
     );
@@ -4116,29 +4357,31 @@ function RichTextEditor(props) {
   const imagePreviewRef = useRef2(null);
   const savedSelectionRef = useRef2(null);
   const imageDragPointerIdRef = useRef2(null);
-  const [contentHtml, setContentHtml] = useState2("");
-  const [editableContentHtml, setEditableContentHtml] = useState2("");
-  const [selectedTemplateId, setSelectedTemplateId] = useState2("blank");
-  const [areTemplatesVisible, setAreTemplatesVisible] = useState2(true);
-  const [isCompactToolbar, setIsCompactToolbar] = useState2(false);
-  const [expandedToolbarSections, setExpandedToolbarSections] = useState2(
+  const [contentHtml, setContentHtml] = useState3("");
+  const [editableContentHtml, setEditableContentHtml] = useState3("");
+  const [selectedTemplateId, setSelectedTemplateId] = useState3("blank");
+  const [areTemplatesVisible, setAreTemplatesVisible] = useState3(true);
+  const [isCompactToolbar, setIsCompactToolbar] = useState3(false);
+  const [expandedToolbarSections, setExpandedToolbarSections] = useState3(
     createCompactToolbarState
   );
-  const [imageEditorState, setImageEditorState] = useState2(null);
-  const [toolbarState, setToolbarState] = useState2(
+  const [imageEditorState, setImageEditorState] = useState3(null);
+  const [toolbarState, setToolbarState] = useState3(
     createDefaultToolbarState()
   );
-  const [loading, setLoading] = useState2(false);
-  const [isPaginating, setIsPaginating] = useState2(false);
-  const [pages, setPages] = useState2([]);
-  const [docxPages, setDocxPages] = useState2([]);
-  const [isRenderingDocxPreview, setIsRenderingDocxPreview] = useState2(false);
-  const [docxPreviewFailed, setDocxPreviewFailed] = useState2(false);
+  const [loading, setLoading] = useState3(false);
+  const [isPaginating, setIsPaginating] = useState3(false);
+  const [pages, setPages] = useState3([]);
+  const [docxPages, setDocxPages] = useState3([]);
+  const [isRenderingDocxPreview, setIsRenderingDocxPreview] = useState3(false);
+  const [docxPreviewFailed, setDocxPreviewFailed] = useState3(false);
   const mdParser = useRef2(new MarkdownIt({ html: true, linkify: true }));
   const authoringTemplates = useMemo2(() => 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
@@ -4182,7 +4425,7 @@ function RichTextEditor(props) {
     }
     setToolbarState(readToolbarState(editorRef.current, savedSelectionRef.current));
   };
-  useEffect2(() => {
+  useEffect3(() => {
     const loadDoc = async () => {
       if (!props.arrayBuffer) {
         const templateHtml = props.mode === "create" ? authoringTemplates[0]?.html ?? "" : "";
@@ -4243,7 +4486,7 @@ function RichTextEditor(props) {
     props.locale,
     props.mode
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isAuthoringMode || !editorRef.current) {
       return;
     }
@@ -4252,7 +4495,7 @@ function RichTextEditor(props) {
     }
     refreshToolbarState();
   }, [editableContentHtml, isAuthoringMode]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isAuthoringMode || typeof document === "undefined") {
       return;
     }
@@ -4272,12 +4515,12 @@ function RichTextEditor(props) {
       document.removeEventListener("selectionchange", handleSelectionChange);
     };
   }, [isAuthoringMode]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (props.mode === "create") {
       setAreTemplatesVisible(true);
     }
   }, [props.mode, props.fileName]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -4294,7 +4537,7 @@ function RichTextEditor(props) {
       mediaQuery.removeEventListener("change", syncCompactState);
     };
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (toolbarState.hasSelectedImage && toolbarState.imageSrc) {
       setImageEditorState({
         src: toolbarState.imageSrc,
@@ -4316,7 +4559,7 @@ function RichTextEditor(props) {
     toolbarState.imageScale,
     toolbarState.imageSrc
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!useDocxPreviewView || !docxPreviewRef.current || !props.arrayBuffer) {
       setDocxPages([]);
       setDocxPreviewFailed(false);
@@ -4415,13 +4658,23 @@ function RichTextEditor(props) {
     props.onThumbs,
     useDocxPreviewView
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     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;
@@ -4490,17 +4743,26 @@ function RichTextEditor(props) {
   }, [
     contentHtml,
     docxPreviewFailed,
+    props.currentPage,
     props.mode,
     props.onCurrentPageChange,
     props.onPageCount,
     props.onThumbs,
+    useContinuousPlainTextView,
     useDocxPreviewView
   ]);
   const activeViewPages = useMemo2(
-    () => props.mode === "view" ? useDocxPreviewView && !docxPreviewFailed ? docxPages : pages : void 0,
-    [docxPages, docxPreviewFailed, pages, props.mode, useDocxPreviewView]
+    () => props.mode === "view" ? useDocxPreviewView && !docxPreviewFailed ? docxPages : useContinuousPlainTextView ? void 0 : pages : void 0,
+    [
+      docxPages,
+      docxPreviewFailed,
+      pages,
+      props.mode,
+      useContinuousPlainTextView,
+      useDocxPreviewView
+    ]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     const container = props.mode === "view" ? useDocxPreviewView && !docxPreviewFailed ? docxPreviewRef.current : measureRef.current : editorRef.current;
     props.onExportStateChange?.({
       container,
@@ -4516,7 +4778,7 @@ function RichTextEditor(props) {
     props.onExportStateChange,
     useDocxPreviewView
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       props.onExportStateChange?.(null);
     };
@@ -4822,7 +5084,7 @@ function RichTextEditor(props) {
   };
   const renderToolbarSectionHeader = (section, label) => {
     if (!isCompactToolbar) {
-      return /* @__PURE__ */ jsx2("span", { className: "hv-richtext-toolbar-label", children: label });
+      return /* @__PURE__ */ jsx3("span", { className: "hv-richtext-toolbar-label", children: label });
     }
     const isOpen = isToolbarSectionOpen(section);
     return /* @__PURE__ */ jsxs2(
@@ -4833,8 +5095,8 @@ function RichTextEditor(props) {
         "aria-expanded": isOpen,
         onClick: () => toggleToolbarSection(section),
         children: [
-          /* @__PURE__ */ jsx2("span", { className: "hv-richtext-toolbar-label", children: label }),
-          /* @__PURE__ */ jsx2("span", { className: "hv-richtext-toolbar-toggle-copy", children: isOpen ? props.locale["documents.richText.toolbar.collapseSection"] : props.locale["documents.richText.toolbar.expandSection"] })
+          /* @__PURE__ */ jsx3("span", { className: "hv-richtext-toolbar-label", children: label }),
+          /* @__PURE__ */ jsx3("span", { className: "hv-richtext-toolbar-toggle-copy", children: isOpen ? props.locale["documents.richText.toolbar.collapseSection"] : props.locale["documents.richText.toolbar.expandSection"] })
         ]
       }
     );
@@ -4855,7 +5117,7 @@ function RichTextEditor(props) {
   };
   if (props.mode === "view" && useDocxPreviewView && !docxPreviewFailed) {
     return /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2("div", { className: "hv-docx-preview-shell", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3("div", { className: "hv-docx-preview-shell", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
         "div",
         {
           ref: docxPreviewRef,
@@ -4863,11 +5125,11 @@ function RichTextEditor(props) {
           "aria-label": "DOCX document pages"
         }
       ) }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "div",
         {
           className: props.layout === "side-by-side" ? "hv-view-double" : "hv-view-single",
-          children: loading || isRenderingDocxPreview ? /* @__PURE__ */ jsx2("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ jsx2("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
+          children: loading || isRenderingDocxPreview ? /* @__PURE__ */ jsx3("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ jsx3("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
             const page = docxPages[pageNumber - 1];
             if (!page) {
               return null;
@@ -4877,7 +5139,7 @@ function RichTextEditor(props) {
               {
                 className: "hv-page-container hv-docx-page-surface",
                 children: [
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     "img",
                     {
                       src: page.imageUrl,
@@ -4885,7 +5147,7 @@ function RichTextEditor(props) {
                       className: "hv-docx-page-image"
                     }
                   ),
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     SignatureOverlay,
                     {
                       surfaceKey: page.surfaceKey,
@@ -4930,9 +5192,66 @@ function RichTextEditor(props) {
       )
     ] });
   }
+  if (props.mode === "view" && useContinuousPlainTextView) {
+    return /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsx3("div", { className: "hv-docx-measure-shell", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          ref: measureRef,
+          className: "hv-docx-content hv-docx-measure-content hv-text-scroll-content",
+          dangerouslySetInnerHTML: { __html: contentHtml }
+        }
+      ) }),
+      /* @__PURE__ */ jsx3("div", { className: "hv-view-single", children: loading ? /* @__PURE__ */ jsx3("div", { className: "hv-page-container hv-text-scroll-surface", children: /* @__PURE__ */ jsx3("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : /* @__PURE__ */ jsxs2("div", { className: "hv-page-container hv-text-scroll-surface", children: [
+        /* @__PURE__ */ jsx3(
+          "div",
+          {
+            className: "hv-docx-content hv-text-scroll-content",
+            dangerouslySetInnerHTML: { __html: contentHtml }
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          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__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx2("div", { className: "hv-docx-measure-shell", "aria-hidden": "true", children: /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3("div", { className: "hv-docx-measure-shell", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
         "div",
         {
           ref: measureRef,
@@ -4940,11 +5259,11 @@ function RichTextEditor(props) {
           dangerouslySetInnerHTML: { __html: contentHtml }
         }
       ) }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "div",
         {
           className: props.layout === "side-by-side" ? "hv-view-double" : "hv-view-single",
-          children: loading || isPaginating ? /* @__PURE__ */ jsx2("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ jsx2("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
+          children: loading || isPaginating ? /* @__PURE__ */ jsx3("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ jsx3("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
             const page = pages[pageNumber - 1];
             if (!page) {
               return null;
@@ -4954,7 +5273,7 @@ function RichTextEditor(props) {
               {
                 className: "hv-page-container hv-docx-page-surface",
                 children: [
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     "img",
                     {
                       src: page.imageUrl,
@@ -4962,7 +5281,7 @@ function RichTextEditor(props) {
                       className: "hv-docx-page-image"
                     }
                   ),
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     SignatureOverlay,
                     {
                       surfaceKey: page.surfaceKey,
@@ -5008,7 +5327,7 @@ function RichTextEditor(props) {
     ] });
   }
   return /* @__PURE__ */ jsxs2("div", { className: "hv-view-single hv-richtext-authoring-shell", children: [
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(
       "input",
       {
         ref: imageInputRef,
@@ -5018,7 +5337,7 @@ function RichTextEditor(props) {
         onChange: handleInsertImage
       }
     ),
-    isAuthoringMode && /* @__PURE__ */ jsx2("div", { className: "hv-richtext-authoring-top", children: /* @__PURE__ */ jsxs2(
+    isAuthoringMode && /* @__PURE__ */ jsx3("div", { className: "hv-richtext-authoring-top", children: /* @__PURE__ */ jsxs2(
       "div",
       {
         className: "hv-richtext-toolbar",
@@ -5041,11 +5360,11 @@ function RichTextEditor(props) {
                     event.target.value === "blockquote" ? "BLOCKQUOTE" : event.target.value.toUpperCase()
                   ),
                   children: [
-                    /* @__PURE__ */ jsx2("option", { value: "p", children: props.locale["documents.richText.toolbar.paragraph"] }),
-                    /* @__PURE__ */ jsx2("option", { value: "h1", children: props.locale["documents.richText.toolbar.heading1"] }),
-                    /* @__PURE__ */ jsx2("option", { value: "h2", children: props.locale["documents.richText.toolbar.heading2"] }),
-                    /* @__PURE__ */ jsx2("option", { value: "h3", children: props.locale["documents.richText.toolbar.heading3"] }),
-                    /* @__PURE__ */ jsx2("option", { value: "blockquote", children: props.locale["documents.richText.toolbar.quote"] })
+                    /* @__PURE__ */ jsx3("option", { value: "p", children: props.locale["documents.richText.toolbar.paragraph"] }),
+                    /* @__PURE__ */ jsx3("option", { value: "h1", children: props.locale["documents.richText.toolbar.heading1"] }),
+                    /* @__PURE__ */ jsx3("option", { value: "h2", children: props.locale["documents.richText.toolbar.heading2"] }),
+                    /* @__PURE__ */ jsx3("option", { value: "h3", children: props.locale["documents.richText.toolbar.heading3"] }),
+                    /* @__PURE__ */ jsx3("option", { value: "blockquote", children: props.locale["documents.richText.toolbar.quote"] })
                   ]
                 }
               )
@@ -5056,7 +5375,7 @@ function RichTextEditor(props) {
                 props.locale["documents.richText.toolbar.formatLabel"]
               ),
               isToolbarSectionOpen("format") && /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5066,7 +5385,7 @@ function RichTextEditor(props) {
                     children: "B"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5076,7 +5395,7 @@ function RichTextEditor(props) {
                     children: "I"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5086,7 +5405,7 @@ function RichTextEditor(props) {
                     children: "U"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5096,7 +5415,7 @@ function RichTextEditor(props) {
                     children: "UL"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5106,7 +5425,7 @@ function RichTextEditor(props) {
                     children: "1."
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5116,7 +5435,7 @@ function RichTextEditor(props) {
                     children: "L"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5126,7 +5445,7 @@ function RichTextEditor(props) {
                     children: "C"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5136,7 +5455,7 @@ function RichTextEditor(props) {
                     children: "R"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5154,7 +5473,7 @@ function RichTextEditor(props) {
                 props.locale["documents.richText.toolbar.insertLabel"]
               ),
               isToolbarSectionOpen("insert") && /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5164,7 +5483,7 @@ function RichTextEditor(props) {
                     children: "Link"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5182,7 +5501,7 @@ function RichTextEditor(props) {
                 props.locale["documents.richText.toolbar.mediaLabel"]
               ),
               isToolbarSectionOpen("media") && /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5192,7 +5511,7 @@ function RichTextEditor(props) {
                     children: "Image"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5210,7 +5529,7 @@ function RichTextEditor(props) {
                 props.locale["documents.richText.toolbar.historyLabel"]
               ),
               isToolbarSectionOpen("history") && /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5220,7 +5539,7 @@ function RichTextEditor(props) {
                     children: "Undo"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5234,12 +5553,12 @@ function RichTextEditor(props) {
             ] })
           ] }),
           toolbarState.hasSelectedImage && imageEditorState && /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-context-panel", children: [
-            /* @__PURE__ */ jsx2("div", { className: "hv-richtext-context-header", children: /* @__PURE__ */ jsxs2("div", { children: [
-              /* @__PURE__ */ jsx2("strong", { children: props.locale["documents.richText.imageEditorTitle"] }),
-              /* @__PURE__ */ jsx2("p", { children: props.locale["documents.richText.imageEditorHelp"] })
+            /* @__PURE__ */ jsx3("div", { className: "hv-richtext-context-header", children: /* @__PURE__ */ jsxs2("div", { children: [
+              /* @__PURE__ */ jsx3("strong", { children: props.locale["documents.richText.imageEditorTitle"] }),
+              /* @__PURE__ */ jsx3("p", { children: props.locale["documents.richText.imageEditorHelp"] })
             ] }) }),
             /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-image-editor", children: [
-              /* @__PURE__ */ jsx2("div", { className: "hv-richtext-image-preview-card", children: /* @__PURE__ */ jsxs2(
+              /* @__PURE__ */ jsx3("div", { className: "hv-richtext-image-preview-card", children: /* @__PURE__ */ jsxs2(
                 "div",
                 {
                   ref: imagePreviewRef,
@@ -5249,7 +5568,7 @@ function RichTextEditor(props) {
                   onPointerUp: handleImagePreviewPointerUp,
                   onPointerCancel: handleImagePreviewPointerUp,
                   children: [
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "img",
                       {
                         src: imageEditorState.src,
@@ -5260,7 +5579,7 @@ function RichTextEditor(props) {
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "div",
                       {
                         className: "hv-richtext-image-focus-point",
@@ -5275,9 +5594,9 @@ function RichTextEditor(props) {
               ) }),
               /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-image-controls", children: [
                 /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-toolbar-subgroup", children: [
-                  /* @__PURE__ */ jsx2("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageSizeLabel"] }),
+                  /* @__PURE__ */ jsx3("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageSizeLabel"] }),
                   /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-button-group", children: [
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5286,7 +5605,7 @@ function RichTextEditor(props) {
                         children: "S"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5295,7 +5614,7 @@ function RichTextEditor(props) {
                         children: "M"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5304,7 +5623,7 @@ function RichTextEditor(props) {
                         children: "L"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5316,9 +5635,9 @@ function RichTextEditor(props) {
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-toolbar-subgroup", children: [
-                  /* @__PURE__ */ jsx2("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageCropLabel"] }),
+                  /* @__PURE__ */ jsx3("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageCropLabel"] }),
                   /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-button-group", children: [
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5327,7 +5646,7 @@ function RichTextEditor(props) {
                         children: "Orig"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5336,7 +5655,7 @@ function RichTextEditor(props) {
                         children: "Wide"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5345,7 +5664,7 @@ function RichTextEditor(props) {
                         children: "1:1"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5357,9 +5676,9 @@ function RichTextEditor(props) {
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-toolbar-subgroup", children: [
-                  /* @__PURE__ */ jsx2("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageAlignLabel"] }),
+                  /* @__PURE__ */ jsx3("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageAlignLabel"] }),
                   /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-button-group", children: [
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5368,7 +5687,7 @@ function RichTextEditor(props) {
                         children: "Left"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5377,7 +5696,7 @@ function RichTextEditor(props) {
                         children: "Center"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5389,8 +5708,8 @@ function RichTextEditor(props) {
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs2("label", { className: "hv-richtext-range-group", children: [
-                  /* @__PURE__ */ jsx2("span", { children: props.locale["documents.richText.imageZoom"] }),
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3("span", { children: props.locale["documents.richText.imageZoom"] }),
+                  /* @__PURE__ */ jsx3(
                     "input",
                     {
                       type: "range",
@@ -5433,10 +5752,10 @@ function RichTextEditor(props) {
               ] })
             ] })
           ] }),
-          !toolbarState.hasSelectedImage && toolbarState.insideTable && /* @__PURE__ */ jsx2("div", { className: "hv-richtext-context-panel hv-richtext-context-panel-compact", children: /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-toolbar-subgroup", children: [
-            /* @__PURE__ */ jsx2("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.tableLabel"] }),
+          !toolbarState.hasSelectedImage && toolbarState.insideTable && /* @__PURE__ */ jsx3("div", { className: "hv-richtext-context-panel hv-richtext-context-panel-compact", children: /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-toolbar-subgroup", children: [
+            /* @__PURE__ */ jsx3("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.tableLabel"] }),
             /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-button-group", children: [
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -5446,7 +5765,7 @@ function RichTextEditor(props) {
                   children: "+Row"
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -5456,7 +5775,7 @@ function RichTextEditor(props) {
                   children: "+Col"
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -5466,7 +5785,7 @@ function RichTextEditor(props) {
                   children: "-Row"
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -5480,8 +5799,8 @@ function RichTextEditor(props) {
           ] }) }),
           props.mode === "create" && /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-template-panel", children: [
             /* @__PURE__ */ jsxs2("div", { className: "hv-richtext-template-strip", children: [
-              /* @__PURE__ */ jsx2("span", { className: "hv-richtext-template-label", children: props.locale["documents.richText.templates"] }),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3("span", { className: "hv-richtext-template-label", children: props.locale["documents.richText.templates"] }),
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -5491,15 +5810,15 @@ function RichTextEditor(props) {
                 }
               )
             ] }),
-            areTemplatesVisible && /* @__PURE__ */ jsx2("div", { className: "hv-richtext-template-grid", children: authoringTemplates.map((template) => /* @__PURE__ */ jsxs2(
+            areTemplatesVisible && /* @__PURE__ */ jsx3("div", { className: "hv-richtext-template-grid", children: authoringTemplates.map((template) => /* @__PURE__ */ jsxs2(
               "button",
               {
                 type: "button",
                 className: `hv-richtext-template-card ${selectedTemplateId === template.id ? "active" : ""}`,
                 onClick: () => applyTemplate(template.id),
                 children: [
-                  /* @__PURE__ */ jsx2("span", { className: "hv-richtext-template-title", children: props.locale[template.labelKey] }),
-                  /* @__PURE__ */ jsx2("span", { className: "hv-richtext-template-description", children: props.locale[template.descriptionKey] })
+                  /* @__PURE__ */ jsx3("span", { className: "hv-richtext-template-title", children: props.locale[template.labelKey] }),
+                  /* @__PURE__ */ jsx3("span", { className: "hv-richtext-template-description", children: props.locale[template.descriptionKey] })
                 ]
               },
               template.id
@@ -5508,8 +5827,8 @@ function RichTextEditor(props) {
         ]
       }
     ) }),
-    /* @__PURE__ */ jsx2("div", { className: "hv-page-container hv-docx-page-surface", children: loading ? /* @__PURE__ */ jsx2("div", { className: "hv-loading-copy", children: props.locale["documents.richText.processingText"] }) : /* @__PURE__ */ jsxs2("div", { className: "hv-docx-editor-stage", children: [
-      /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3("div", { className: "hv-page-container hv-docx-page-surface", children: loading ? /* @__PURE__ */ jsx3("div", { className: "hv-loading-copy", children: props.locale["documents.richText.processingText"] }) : /* @__PURE__ */ jsxs2("div", { className: "hv-docx-editor-stage", children: [
+      /* @__PURE__ */ jsx3(
         "div",
         {
           ref: editorRef,
@@ -5533,7 +5852,7 @@ function RichTextEditor(props) {
           "aria-label": props.locale["a11y.editor"]
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         SignatureOverlay,
         {
           surfaceKey: "document:main",
@@ -5574,9 +5893,9 @@ function RichTextEditor(props) {
 // src/editors/SpreadsheetEditor.tsx
 import ExcelJS2 from "exceljs";
-import { useEffect as useEffect3, useMemo as useMemo3, useState as useState3 } from "react";
+import { useEffect as useEffect4, useMemo as useMemo3, useState as useState4 } from "react";
 import * as XLSX2 from "xlsx";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MAX_RENDER_ROWS = 400;
 var MAX_RENDER_COLS = 120;
 function toColumnLabel2(index) {
@@ -6160,11 +6479,11 @@ async function buildSheetModels(arrayBuffer, fileName) {
 }
 function SpreadsheetEditor(props) {
   const readonly = props.mode === "view";
-  const [sheets, setSheets] = useState3([]);
-  const [activeCell, setActiveCell] = useState3({ row: 0, col: 0 });
-  const [hasEdits, setHasEdits] = useState3(false);
-  const [dirtyCellAddressesBySheet, setDirtyCellAddressesBySheet] = useState3({});
-  useEffect3(() => {
+  const [sheets, setSheets] = useState4([]);
+  const [activeCell, setActiveCell] = useState4({ row: 0, col: 0 });
+  const [hasEdits, setHasEdits] = useState4(false);
+  const [dirtyCellAddressesBySheet, setDirtyCellAddressesBySheet] = useState4({});
+  useEffect4(() => {
     if (!props.arrayBuffer) {
       const nextSheets = props.mode === "create" ? [createBlankSheetModel("Sheet1")] : [];
       setSheets(nextSheets);
@@ -6214,7 +6533,7 @@ function SpreadsheetEditor(props) {
     props.onThumbs,
     props.mode
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     props.onExportStateChange?.(
       sheets.length > 0 ? {
         sheets,
@@ -6317,12 +6636,12 @@ function SpreadsheetEditor(props) {
     );
   };
   if (!activeSheet) {
-    return /* @__PURE__ */ jsx3("div", { className: "hv-view-single", children: /* @__PURE__ */ jsx3("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ jsx3("p", { className: "hv-empty-state", children: props.locale["documents.sheetMissing"] }) }) });
+    return /* @__PURE__ */ jsx4("div", { className: "hv-view-single", children: /* @__PURE__ */ jsx4("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ jsx4("p", { className: "hv-empty-state", children: props.locale["documents.sheetMissing"] }) }) });
   }
   const isTruncated = activeSheet.rowCount > activeSheet.renderedRowCount || activeSheet.colCount > activeSheet.renderedColCount;
-  return /* @__PURE__ */ jsx3("div", { className: "hv-view-single", children: /* @__PURE__ */ jsxs3("div", { className: "hv-page-container hv-sheet-container", children: [
+  return /* @__PURE__ */ jsx4("div", { className: "hv-view-single", children: /* @__PURE__ */ jsxs3("div", { className: "hv-page-container hv-sheet-container", children: [
     /* @__PURE__ */ jsxs3("div", { className: "hv-sheet-tabs", children: [
-      /* @__PURE__ */ jsx3("div", { className: "hv-sheet-tab-list", children: sheets.map((sheet, index) => /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4("div", { className: "hv-sheet-tab-list", children: sheets.map((sheet, index) => /* @__PURE__ */ jsx4(
         "button",
         {
           type: "button",
@@ -6336,7 +6655,7 @@ function SpreadsheetEditor(props) {
         sheet.name
       )) }),
       !readonly && /* @__PURE__ */ jsxs3("div", { className: "hv-sheet-actions", children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -6345,7 +6664,7 @@ function SpreadsheetEditor(props) {
             children: props.locale["documents.sheetAddSheet"]
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -6354,7 +6673,7 @@ function SpreadsheetEditor(props) {
             children: props.locale["documents.sheetAddRow"]
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -6370,7 +6689,7 @@ function SpreadsheetEditor(props) {
         toColumnLabel2(activeCell.col),
         activeCell.row + 1
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "input",
         {
           value: activeCellValue,
@@ -6380,14 +6699,14 @@ function SpreadsheetEditor(props) {
         }
       )
     ] }),
-    isTruncated && /* @__PURE__ */ jsx3("div", { className: "hv-sheet-viewport-note", children: props.locale["documents.sheetTruncated"].replace("{rows}", String(activeSheet.renderedRowCount)).replace("{cols}", String(activeSheet.renderedColCount)) }),
-    /* @__PURE__ */ jsx3("div", { className: "hv-sheet-scroll", children: /* @__PURE__ */ jsxs3("div", { className: "hv-sheet-surface", children: [
+    isTruncated && /* @__PURE__ */ jsx4("div", { className: "hv-sheet-viewport-note", children: props.locale["documents.sheetTruncated"].replace("{rows}", String(activeSheet.renderedRowCount)).replace("{cols}", String(activeSheet.renderedColCount)) }),
+    /* @__PURE__ */ jsx4("div", { className: "hv-sheet-scroll", children: /* @__PURE__ */ jsxs3("div", { className: "hv-sheet-surface", children: [
       /* @__PURE__ */ jsxs3("table", { className: "hv-sheet-table", children: [
-        /* @__PURE__ */ jsx3("thead", { children: /* @__PURE__ */ jsxs3("tr", { children: [
-          /* @__PURE__ */ jsx3("th", { className: "hv-sheet-corner" }),
+        /* @__PURE__ */ jsx4("thead", { children: /* @__PURE__ */ jsxs3("tr", { children: [
+          /* @__PURE__ */ jsx4("th", { className: "hv-sheet-corner" }),
           Array.from(
             { length: activeSheet.renderedColCount },
-            (_, colIndex) => /* @__PURE__ */ jsx3(
+            (_, colIndex) => /* @__PURE__ */ jsx4(
               "th",
               {
                 className: "hv-sheet-column-header",
@@ -6401,12 +6720,12 @@ function SpreadsheetEditor(props) {
             )
           )
         ] }) }),
-        /* @__PURE__ */ jsx3("tbody", { children: activeSheet.data.map((row, rowIndex) => /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsx4("tbody", { children: activeSheet.data.map((row, rowIndex) => /* @__PURE__ */ jsxs3(
           "tr",
           {
             style: { height: activeSheet.rowHeights[rowIndex] ?? 32 },
             children: [
-              /* @__PURE__ */ jsx3("td", { className: "hv-sheet-row-header", children: rowIndex + 1 }),
+              /* @__PURE__ */ jsx4("td", { className: "hv-sheet-row-header", children: rowIndex + 1 }),
               row.map((cellValue, colIndex) => {
                 const cellKey = makeCellKey(rowIndex, colIndex);
                 if (mergeLookup.covered.has(cellKey)) {
@@ -6415,7 +6734,7 @@ function SpreadsheetEditor(props) {
                 const merge = mergeLookup.starts.get(cellKey);
                 const cellModel = activeSheet.cells[cellKey];
                 const width = activeSheet.colWidths[colIndex] ?? 96;
-                return /* @__PURE__ */ jsx3(
+                return /* @__PURE__ */ jsx4(
                   "td",
                   {
                     rowSpan: merge ? merge.endRow - merge.startRow + 1 : 1,
@@ -6442,7 +6761,7 @@ function SpreadsheetEditor(props) {
           rowIndex
         )) })
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         SignatureOverlay,
         {
           surfaceKey: `sheet:${activeSheet.name}`,
@@ -6483,8 +6802,8 @@ function SpreadsheetEditor(props) {
 }
 // src/renderers/ImageRenderer.tsx
-import { useEffect as useEffect4, useMemo as useMemo4 } from "react";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useEffect as useEffect5, useMemo as useMemo4 } from "react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function ImageRenderer(props) {
   const url = useMemo4(() => {
     if (!props.arrayBuffer) {
@@ -6493,7 +6812,7 @@ function ImageRenderer(props) {
     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]);
-  useEffect4(() => {
+  useEffect5(() => {
     return () => {
       if (url) {
         URL.revokeObjectURL(url);
@@ -6501,11 +6820,11 @@ function ImageRenderer(props) {
     };
   }, [url]);
   if (!props.arrayBuffer || !url) {
-    return /* @__PURE__ */ jsx4("div", { className: "hv-view-single", children: /* @__PURE__ */ jsx4("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ jsx4("p", { className: "hv-empty-state", children: props.locale["documents.imageMissing"] }) }) });
+    return /* @__PURE__ */ jsx5("div", { className: "hv-view-single", children: /* @__PURE__ */ jsx5("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ jsx5("p", { className: "hv-empty-state", children: props.locale["documents.imageMissing"] }) }) });
   }
-  return /* @__PURE__ */ jsx4("div", { className: "hv-view-single", children: /* @__PURE__ */ jsxs4("div", { className: "hv-page-container hv-image-surface", children: [
-    /* @__PURE__ */ jsx4("img", { src: url, alt: props.fileName, className: "hv-image-renderer" }),
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5("div", { className: "hv-view-single", children: /* @__PURE__ */ jsxs4("div", { className: "hv-page-container hv-image-surface", children: [
+    /* @__PURE__ */ jsx5("img", { src: url, alt: props.fileName, className: "hv-image-renderer" }),
+    /* @__PURE__ */ jsx5(
       SignatureOverlay,
       {
         surfaceKey: "image:main",
@@ -6548,8 +6867,8 @@ import {
   getDocument as getDocument2,
   GlobalWorkerOptions as GlobalWorkerOptions2
 } from "pdfjs-dist";
-import { useEffect as useEffect5, useMemo as useMemo5, useRef as useRef3, useState as useState4 } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useMemo as useMemo5, useRef as useRef3, useState as useState5 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var pdfWorkerBlobUrlPromise2 = null;
 function yieldToBrowser() {
   return new Promise((resolve) => {
@@ -6574,10 +6893,10 @@ async function resolvePdfWorkerSrc(customWorkerSrc) {
 }
 function PdfRenderer(props) {
   const { url, arrayBuffer, layout, currentPage, workerSrc } = props;
-  const [doc, setDoc] = useState4(null);
-  const [error, setError] = useState4(null);
+  const [doc, setDoc] = useState5(null);
+  const [error, setError] = useState5(null);
   const thumbnailJobRef = useRef3(0);
-  useEffect5(() => {
+  useEffect6(() => {
     let active = true;
     const thumbnailJobId = thumbnailJobRef.current + 1;
     thumbnailJobRef.current = thumbnailJobId;
@@ -6652,16 +6971,16 @@ function PdfRenderer(props) {
     return [p];
   }, [doc, currentPage, layout]);
   if (error) {
-    return /* @__PURE__ */ jsx5("div", { className: "hv-page-container", style: { padding: "32px" }, children: /* @__PURE__ */ jsxs5("div", { className: "hv-error-banner", children: [
-      /* @__PURE__ */ jsx5("strong", { children: props.locale["documents.pdfLoadErrorTitle"] }),
-      /* @__PURE__ */ jsx5("p", { children: error })
+    return /* @__PURE__ */ jsx6("div", { className: "hv-page-container", style: { padding: "32px" }, children: /* @__PURE__ */ jsxs5("div", { className: "hv-error-banner", children: [
+      /* @__PURE__ */ jsx6("strong", { children: props.locale["documents.pdfLoadErrorTitle"] }),
+      /* @__PURE__ */ jsx6("p", { children: error })
     ] }) });
   }
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     "div",
     {
       className: `hv-doc-scroll ${layout === "side-by-side" ? "hv-view-double" : "hv-view-single"}`,
-      children: pagesToRender.map((page) => /* @__PURE__ */ jsx5(
+      children: pagesToRender.map((page) => /* @__PURE__ */ jsx6(
         PdfPage,
         {
           doc,
@@ -6679,7 +6998,7 @@ function PdfPage({
   signatureOverlay
 }) {
   const canvasRef = useRef3(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!doc || !canvasRef.current) return;
     let active = true;
     const render = async () => {
@@ -6716,8 +7035,8 @@ function PdfPage({
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsx5("canvas", { ref: canvasRef, className: "hv-pdf-canvas" }),
-        /* @__PURE__ */ jsx5(
+        /* @__PURE__ */ jsx6("canvas", { ref: canvasRef, className: "hv-pdf-canvas" }),
+        /* @__PURE__ */ jsx6(
           SignatureOverlay,
           {
             surfaceKey: `page:${pageNum}`,
@@ -6759,9 +7078,9 @@ function PdfPage({
 }
 // src/renderers/PptxRenderer.tsx
-import { useEffect as useEffect6, useMemo as useMemo6, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo6, useRef as useRef4, useState as useState6 } from "react";
 import JSZip2 from "jszip";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "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";
@@ -6782,11 +7101,11 @@ function isBrowserRenderableSlideImage(source) {
   return !/^data:image\/(?:emf|wmf|tiff)/i.test(source);
 }
 function PresentationImage(props) {
-  const [failed, setFailed] = useState5(!isBrowserRenderableSlideImage(props.src));
+  const [failed, setFailed] = useState6(!isBrowserRenderableSlideImage(props.src));
   if (failed) {
-    return /* @__PURE__ */ jsx6("div", { className: "hv-slide-image-fallback", children: props.alt });
+    return /* @__PURE__ */ jsx7("div", { className: "hv-slide-image-fallback", children: props.alt });
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "img",
     {
       src: props.src,
@@ -7049,12 +7368,12 @@ function makeSlideThumbnail(slide, index) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
 }
 function PptxRenderer(props) {
-  const [slides, setSlides] = useState5([]);
-  const [slideSize, setSlideSize] = useState5({ width: 9144e3, height: 5143500 });
-  const [error, setError] = useState5(null);
+  const [slides, setSlides] = useState6([]);
+  const [slideSize, setSlideSize] = useState6({ width: 9144e3, height: 5143500 });
+  const [error, setError] = useState6(null);
   const viewRef = useRef4(null);
-  const [viewWidth, setViewWidth] = useState5(SLIDE_RENDER_MAX_VIEW_WIDTH);
-  useEffect6(() => {
+  const [viewWidth, setViewWidth] = useState6(SLIDE_RENDER_MAX_VIEW_WIDTH);
+  useEffect7(() => {
     if (!props.arrayBuffer) {
       setSlides([]);
       props.onPageCount(1);
@@ -7106,7 +7425,7 @@ function PptxRenderer(props) {
     };
     loadPptx();
   }, [props.arrayBuffer, props.onExportStateChange]);
-  useEffect6(() => {
+  useEffect7(() => {
     const host = viewRef.current;
     if (!host || typeof ResizeObserver === "undefined") {
       return;
@@ -7154,9 +7473,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__ */ jsx6("div", { className: "hv-error-banner", children: error });
+    return /* @__PURE__ */ jsx7("div", { className: "hv-error-banner", children: error });
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       ref: viewRef,
@@ -7166,7 +7485,7 @@ function PptxRenderer(props) {
         if (!slide) {
           return null;
         }
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx7(
           "div",
           {
             className: "hv-page-container hv-slide-surface",
@@ -7174,7 +7493,7 @@ function PptxRenderer(props) {
               aspectRatio: `${slideSize.width}/${slideSize.height}`,
               width: props.layout === "side-by-side" && pagesToShow.length > 1 ? `${slideViewportWidth}px` : void 0
             },
-            children: /* @__PURE__ */ jsx6(
+            children: /* @__PURE__ */ jsx7(
               "div",
               {
                 className: "hv-slide-stage",
@@ -7189,7 +7508,7 @@ function PptxRenderer(props) {
                       transform: `scale(${sceneScale})`
                     },
                     children: [
-                      slide.elements.map((element) => /* @__PURE__ */ jsx6(
+                      slide.elements.map((element) => /* @__PURE__ */ jsx7(
                         "div",
                         {
                           className: `hv-slide-element ${element.kind}`,
@@ -7202,20 +7521,20 @@ function PptxRenderer(props) {
                             background: element.kind === "shape" ? element.fill || "transparent" : void 0,
                             borderColor: element.stroke
                           },
-                          children: element.kind === "image" && element.imageSrc ? /* @__PURE__ */ jsx6(
+                          children: element.kind === "image" && element.imageSrc ? /* @__PURE__ */ jsx7(
                             PresentationImage,
                             {
                               src: element.imageSrc,
                               alt: element.alt || "Slide image"
                             }
-                          ) : /* @__PURE__ */ jsx6("div", { className: "hv-slide-textbox", children: element.paragraphs?.map((paragraph, paragraphIndex) => /* @__PURE__ */ jsxs6(
+                          ) : /* @__PURE__ */ jsx7("div", { className: "hv-slide-textbox", children: element.paragraphs?.map((paragraph, paragraphIndex) => /* @__PURE__ */ jsxs6(
                             "p",
                             {
                               className: `hv-slide-paragraph ${alignToClassName(paragraph.align)}`,
                               style: { paddingInlineStart: `${paragraph.level * 18}px` },
                               children: [
-                                paragraph.bullet && /* @__PURE__ */ jsx6("span", { className: "hv-slide-bullet", children: "\u2022" }),
-                                /* @__PURE__ */ jsx6("span", { className: "hv-slide-paragraph-copy", children: paragraph.runs.map((run, runIndex) => /* @__PURE__ */ jsx6(
+                                paragraph.bullet && /* @__PURE__ */ jsx7("span", { className: "hv-slide-bullet", children: "\u2022" }),
+                                /* @__PURE__ */ jsx7("span", { className: "hv-slide-paragraph-copy", children: paragraph.runs.map((run, runIndex) => /* @__PURE__ */ jsx7(
                                   "span",
                                   {
                                     style: {
@@ -7240,7 +7559,7 @@ function PptxRenderer(props) {
                         },
                         element.id
                       )),
-                      /* @__PURE__ */ jsx6(
+                      /* @__PURE__ */ jsx7(
                         SignatureOverlay,
                         {
                           surfaceKey: `slide:${pageNumber}`,
@@ -7416,8 +7735,8 @@ var defaultLocale = {
 // src/components/SignaturePanel.tsx
 import { Check, Plus, Trash2, X } from "lucide-react";
-import { useMemo as useMemo7, useRef as useRef5, useState as useState6 } from "react";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useMemo as useMemo7, useRef as useRef5, useState as useState7 } from "react";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function sameSignature(left, right) {
   if (left.id && right.id) {
     return left.id === right.id;
@@ -7488,10 +7807,10 @@ function SignaturePanel(props) {
     locale
   } = props;
   const canvasRef = useRef5(null);
-  const [localSignatures, setLocalSignatures] = useState6([]);
-  const [showModal, setShowModal] = useState6(false);
-  const [isDrawing, setIsDrawing] = useState6(false);
-  const [hasInk, setHasInk] = useState6(false);
+  const [localSignatures, setLocalSignatures] = useState7([]);
+  const [showModal, setShowModal] = useState7(false);
+  const [isDrawing, setIsDrawing] = useState7(false);
+  const [hasInk, setHasInk] = useState7(false);
   const signatures = useMemo7(() => {
     const merged = [];
     for (const signature of [...externalSignatures, ...localSignatures]) {
@@ -7601,14 +7920,14 @@ function SignaturePanel(props) {
               className: "hv-sidebar-header",
               style: { justifyContent: "space-between", padding: "12px 16px" },
               children: [
-                /* @__PURE__ */ jsx7("h3", { style: { margin: 0, fontSize: "15px", fontWeight: 600 }, children: locale["signatures.title"] }),
-                /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8("h3", { style: { margin: 0, fontSize: "15px", fontWeight: 600 }, children: locale["signatures.title"] }),
+                /* @__PURE__ */ jsx8(
                   "button",
                   {
                     onClick: onClose,
                     className: "hv-btn",
                     style: { padding: "4px", border: "none" },
-                    children: /* @__PURE__ */ jsx7(X, { size: 18 })
+                    children: /* @__PURE__ */ jsx8(X, { size: 18 })
                   }
                 )
               ]
@@ -7628,25 +7947,26 @@ function SignaturePanel(props) {
                   color: "var(--hv-primary)"
                 },
                 children: [
-                  /* @__PURE__ */ jsx7(Plus, { size: 18, style: { marginRight: "8px" } }),
+                  /* @__PURE__ */ jsx8(Plus, { size: 18, style: { marginRight: "8px" } }),
                   locale["signatures.new"]
                 ]
               }
             ),
             selectedSignature && /* @__PURE__ */ jsxs7("div", { className: "hv-signature-selection-card", children: [
-              /* @__PURE__ */ jsx7("div", { className: "hv-signature-selection-title", children: locale["signatures.ready"] }),
-              /* @__PURE__ */ jsx7(
-                "img",
+              /* @__PURE__ */ jsx8("div", { className: "hv-signature-selection-title", children: locale["signatures.ready"] }),
+              /* @__PURE__ */ jsx8(
+                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__ */ jsx7("div", { className: "hv-signature-selection-copy", children: locale["signatures.placeHint"] }),
+              /* @__PURE__ */ jsx8("div", { className: "hv-signature-selection-copy", children: locale["signatures.placeHint"] }),
               /* @__PURE__ */ jsxs7("div", { className: "hv-signature-color-picker", children: [
-                /* @__PURE__ */ jsx7("span", { className: "hv-signature-color-picker-label", children: locale["signatures.color"] }),
-                /* @__PURE__ */ jsx7("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ jsx7(
+                /* @__PURE__ */ jsx8("span", { className: "hv-signature-color-picker-label", children: locale["signatures.color"] }),
+                /* @__PURE__ */ jsx8("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ jsx8(
                   "button",
                   {
                     type: "button",
@@ -7659,7 +7979,7 @@ function SignaturePanel(props) {
                   color
                 )) })
               ] }),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 "button",
                 {
                   type: "button",
@@ -7670,7 +7990,7 @@ function SignaturePanel(props) {
                 }
               )
             ] }),
-            signatures.length === 0 && /* @__PURE__ */ jsx7("div", { className: "hv-signature-empty", children: locale["signatures.empty"] }),
+            signatures.length === 0 && /* @__PURE__ */ jsx8("div", { className: "hv-signature-empty", children: locale["signatures.empty"] }),
             signatures.map((signature, index) => {
               const isLocal = localSignatures.some(
                 (item) => sameSignature(item, signature)
@@ -7689,26 +8009,27 @@ function SignaturePanel(props) {
                         onClick: () => onSelectSignature(signature),
                         children: [
                           /* @__PURE__ */ jsxs7("div", { className: "hv-signature-item-stack", children: [
-                            /* @__PURE__ */ jsx7(
-                              "img",
+                            /* @__PURE__ */ jsx8(
+                              RenderableSignatureImage,
                               {
-                                src: signature.signatureImageUrl,
+                                signatureImageUrl: signature.signatureImageUrl,
+                                inkColor: "black",
                                 alt: signature.signedBy ? `Signature by ${signature.signedBy}` : "Signature",
                                 className: "hv-signature-item-image"
                               }
                             ),
                             /* @__PURE__ */ jsxs7("div", { className: "hv-signature-item-copy", children: [
-                              signature.signedBy && /* @__PURE__ */ jsx7("strong", { children: signature.signedBy }),
-                              signature.jobTitle && /* @__PURE__ */ jsx7("span", { children: signature.jobTitle }),
-                              /* @__PURE__ */ jsx7("span", { children: normalizeSignatureDate(signature.dateSigned) }),
-                              signature.comment && /* @__PURE__ */ jsx7("em", { children: signature.comment })
+                              signature.signedBy && /* @__PURE__ */ jsx8("strong", { children: signature.signedBy }),
+                              signature.jobTitle && /* @__PURE__ */ jsx8("span", { children: signature.jobTitle }),
+                              /* @__PURE__ */ jsx8("span", { children: normalizeSignatureDate(signature.dateSigned) }),
+                              signature.comment && /* @__PURE__ */ jsx8("em", { children: signature.comment })
                             ] })
                           ] }),
-                          isSelected && /* @__PURE__ */ jsx7("span", { className: "hv-signature-item-check", children: /* @__PURE__ */ jsx7(Check, { size: 14 }) })
+                          isSelected && /* @__PURE__ */ jsx8("span", { className: "hv-signature-item-check", children: /* @__PURE__ */ jsx8(Check, { size: 14 }) })
                         ]
                       }
                     ),
-                    isLocal && /* @__PURE__ */ jsx7(
+                    isLocal && /* @__PURE__ */ jsx8(
                       "button",
                       {
                         type: "button",
@@ -7731,7 +8052,7 @@ function SignaturePanel(props) {
                             onClearSelection();
                           }
                         },
-                        children: /* @__PURE__ */ jsx7(Trash2, { size: 12 })
+                        children: /* @__PURE__ */ jsx8(Trash2, { size: 12 })
                       }
                     )
                   ]
@@ -7743,7 +8064,7 @@ function SignaturePanel(props) {
         ]
       }
     ),
-    showModal && /* @__PURE__ */ jsx7("div", { className: "hv-modal-overlay", children: /* @__PURE__ */ jsxs7("div", { className: "hv-modal", style: { width: "450px", maxWidth: "90vw" }, children: [
+    showModal && /* @__PURE__ */ jsx8("div", { className: "hv-modal-overlay", children: /* @__PURE__ */ jsxs7("div", { className: "hv-modal", style: { width: "450px", maxWidth: "90vw" }, children: [
       /* @__PURE__ */ jsxs7(
         "div",
         {
@@ -7755,14 +8076,14 @@ function SignaturePanel(props) {
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ jsx7("h3", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: locale["signatures.drawTitle"] }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8("h3", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: locale["signatures.drawTitle"] }),
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 onClick: () => setShowModal(false),
                 className: "hv-btn",
                 style: { border: "none" },
-                children: /* @__PURE__ */ jsx7(X, { size: 20 })
+                children: /* @__PURE__ */ jsx8(X, { size: 20 })
               }
             )
           ]
@@ -7779,7 +8100,7 @@ function SignaturePanel(props) {
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "div",
               {
                 style: {
@@ -7789,7 +8110,7 @@ function SignaturePanel(props) {
                   overflow: "hidden",
                   boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.05)"
                 },
-                children: /* @__PURE__ */ jsx7(
+                children: /* @__PURE__ */ jsx8(
                   "canvas",
                   {
                     ref: canvasRef,
@@ -7811,7 +8132,7 @@ function SignaturePanel(props) {
                 )
               }
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "p",
               {
                 style: {
@@ -7836,8 +8157,8 @@ function SignaturePanel(props) {
             gap: "12px"
           },
           children: [
-            /* @__PURE__ */ jsx7("button", { onClick: clearCanvas, className: "hv-btn", children: locale["signatures.clear"] }),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8("button", { onClick: clearCanvas, className: "hv-btn", children: locale["signatures.clear"] }),
+            /* @__PURE__ */ jsx8(
               "button",
               {
                 onClick: saveSignature,
@@ -7854,16 +8175,16 @@ function SignaturePanel(props) {
 }
 // src/components/ThumbnailsSidebar.tsx
-import { useEffect as useEffect7, useMemo as useMemo8, useRef as useRef6, useState as useState7 } from "react";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useMemo as useMemo8, useRef as useRef6, useState as useState8 } from "react";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var THUMB_ITEM_HEIGHT = 184;
 var THUMB_OVERSCAN = 4;
 function ThumbnailsSidebar(props) {
   const { isOpen, thumbnails, currentPage, onSelectPage, locale } = props;
   const listRef = useRef6(null);
-  const [scrollTop, setScrollTop] = useState7(0);
-  const [viewportHeight, setViewportHeight] = useState7(0);
-  useEffect7(() => {
+  const [scrollTop, setScrollTop] = useState8(0);
+  const [viewportHeight, setViewportHeight] = useState8(0);
+  useEffect8(() => {
     const element = listRef.current;
     if (!element || !isOpen) {
       return;
@@ -7884,7 +8205,7 @@ function ThumbnailsSidebar(props) {
       behavior: "smooth"
     });
   }, [currentPage, isOpen]);
-  useEffect7(() => {
+  useEffect8(() => {
     const element = listRef.current;
     if (!element) {
       return;
@@ -7946,8 +8267,8 @@ function ThumbnailsSidebar(props) {
     ),
     [thumbnails, virtualWindow.endIndex, virtualWindow.startIndex]
   );
-  return /* @__PURE__ */ jsx8("div", { className: `hv-sidebar ${!isOpen ? "collapsed" : ""}`, children: /* @__PURE__ */ jsxs8("div", { ref: listRef, className: "hv-thumb-list", children: [
-    thumbnails.length > 0 && /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9("div", { className: `hv-sidebar ${!isOpen ? "collapsed" : ""}`, children: /* @__PURE__ */ jsxs8("div", { ref: listRef, className: "hv-thumb-list", children: [
+    thumbnails.length > 0 && /* @__PURE__ */ jsx9(
       "div",
       {
         className: "hv-thumb-viewport",
@@ -7963,14 +8284,14 @@ function ThumbnailsSidebar(props) {
               style: { top: `${absoluteIndex * THUMB_ITEM_HEIGHT}px` },
               onClick: () => onSelectPage(pageNum),
               children: [
-                /* @__PURE__ */ jsx8("div", { className: "hv-thumb-preview", children: src ? /* @__PURE__ */ jsx8(
+                /* @__PURE__ */ jsx9("div", { className: "hv-thumb-preview", children: src ? /* @__PURE__ */ jsx9(
                   "img",
                   {
                     src,
                     alt: `Page ${pageNum}`,
                     className: "hv-thumb-img"
                   }
-                ) : /* @__PURE__ */ jsx8("div", { className: "hv-thumb-skeleton", children: /* @__PURE__ */ jsx8("span", { children: "..." }) }) }),
+                ) : /* @__PURE__ */ jsx9("div", { className: "hv-thumb-skeleton", children: /* @__PURE__ */ jsx9("span", { children: "..." }) }) }),
                 /* @__PURE__ */ jsxs8("span", { className: "hv-thumb-label", children: [
                   locale["thumbnails.page"],
                   " ",
@@ -7983,7 +8304,7 @@ function ThumbnailsSidebar(props) {
         })
       }
     ),
-    thumbnails.length === 0 && /* @__PURE__ */ jsx8("div", { className: "hv-thumb-empty", children: locale["thumbnails.empty"] })
+    thumbnails.length === 0 && /* @__PURE__ */ jsx9("div", { className: "hv-thumb-empty", children: locale["thumbnails.empty"] })
   ] }) });
 }
@@ -8002,7 +8323,7 @@ import {
   ZoomIn,
   ZoomOut
 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 function Toolbar(props) {
   const {
     fileName,
@@ -8040,16 +8361,16 @@ function Toolbar(props) {
   };
   return /* @__PURE__ */ jsxs9("div", { className: "hv-toolbar", children: [
     /* @__PURE__ */ jsxs9("div", { className: "hv-toolbar-group", children: [
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           className: `hv-btn ${props.showThumbnails ? "hv-btn-active" : ""}`,
           onClick: props.onToggleThumbnails,
           title: locale["toolbar.thumbs"],
-          children: props.showThumbnails ? /* @__PURE__ */ jsx9(PanelLeftClose, { size: 20 }) : /* @__PURE__ */ jsx9(PanelLeftOpen, { size: 20 })
+          children: props.showThumbnails ? /* @__PURE__ */ jsx10(PanelLeftClose, { size: 20 }) : /* @__PURE__ */ jsx10(PanelLeftOpen, { size: 20 })
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "div",
         {
           className: "hv-sep",
@@ -8061,7 +8382,7 @@ function Toolbar(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "span",
         {
           style: {
@@ -8077,17 +8398,17 @@ function Toolbar(props) {
       )
     ] }),
     /* @__PURE__ */ jsxs9("div", { className: "hv-toolbar-group", children: [
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           className: "hv-btn",
           disabled: currentPage <= 1,
           onClick: handlePrev,
-          children: /* @__PURE__ */ jsx9(ChevronLeft, { size: 20 })
+          children: /* @__PURE__ */ jsx10(ChevronLeft, { size: 20 })
         }
       ),
       /* @__PURE__ */ jsxs9("div", { className: "hv-toolbar-page-group", children: [
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "input",
           {
             type: "number",
@@ -8098,31 +8419,31 @@ function Toolbar(props) {
             max: pageCount
           }
         ),
-        /* @__PURE__ */ jsx9("span", { className: "hv-toolbar-page-sep", children: "/" }),
-        /* @__PURE__ */ jsx9("span", { children: pageCount })
+        /* @__PURE__ */ jsx10("span", { className: "hv-toolbar-page-sep", children: "/" }),
+        /* @__PURE__ */ jsx10("span", { children: pageCount })
       ] }),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           className: "hv-btn",
           disabled: currentPage >= pageCount,
           onClick: handleNext,
-          children: /* @__PURE__ */ jsx9(ChevronRight, { size: 20 })
+          children: /* @__PURE__ */ jsx10(ChevronRight, { size: 20 })
         }
       )
     ] }),
     /* @__PURE__ */ jsxs9("div", { className: "hv-toolbar-group", children: [
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           className: "hv-btn",
           onClick: onZoomOut,
           title: locale["toolbar.zoomOut"],
           disabled: zoom <= 0.5,
-          children: /* @__PURE__ */ jsx9(ZoomOut, { size: 18 })
+          children: /* @__PURE__ */ jsx10(ZoomOut, { size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           className: "hv-btn",
@@ -8134,17 +8455,17 @@ function Toolbar(props) {
           ] })
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           className: "hv-btn",
           onClick: onZoomIn,
           title: locale["toolbar.zoomIn"],
           disabled: zoom >= 2,
-          children: /* @__PURE__ */ jsx9(ZoomIn, { size: 18 })
+          children: /* @__PURE__ */ jsx10(ZoomIn, { size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "div",
         {
           className: "hv-sep",
@@ -8156,22 +8477,22 @@ function Toolbar(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           className: `hv-btn ${layout === "single" ? "hv-btn-active" : ""}`,
           onClick: () => onLayoutChange("single"),
           title: locale["toolbar.layout.single"],
-          children: /* @__PURE__ */ jsx9(LayoutTemplate, { size: 18 })
+          children: /* @__PURE__ */ jsx10(LayoutTemplate, { size: 18 })
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "button",
         {
           className: `hv-btn ${layout === "side-by-side" ? "hv-btn-active" : ""}`,
           onClick: () => onLayoutChange("side-by-side"),
           title: locale["toolbar.layout.two"],
-          children: /* @__PURE__ */ jsx9(Grid2X2, { size: 18 })
+          children: /* @__PURE__ */ jsx10(Grid2X2, { size: 18 })
         }
       ),
       showHeaderFooterToggle && /* @__PURE__ */ jsxs9(
@@ -8181,12 +8502,12 @@ function Toolbar(props) {
           onClick: onToggleHeaderFooter,
           title: locale["toolbar.headerFooter"],
           children: [
-            /* @__PURE__ */ jsx9("span", { style: { fontSize: "12px", fontWeight: 700, marginRight: "8px" }, children: "HF" }),
-            /* @__PURE__ */ jsx9("span", { className: "hv-btn-label", children: locale["toolbar.headerFooter"] })
+            /* @__PURE__ */ jsx10("span", { style: { fontSize: "12px", fontWeight: 700, marginRight: "8px" }, children: "HF" }),
+            /* @__PURE__ */ jsx10("span", { className: "hv-btn-label", children: locale["toolbar.headerFooter"] })
           ]
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "div",
         {
           className: "hv-sep",
@@ -8199,14 +8520,14 @@ function Toolbar(props) {
         }
       ),
       saveEnabled && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-        showExportPdfAction && /* @__PURE__ */ jsx9(
+        showExportPdfAction && /* @__PURE__ */ jsx10(
           "button",
           {
             className: "hv-btn",
             onClick: onExportPdf,
             title: locale["toolbar.exportPdf"],
             disabled: isSaving,
-            children: /* @__PURE__ */ jsx9(FileDown, { size: 18 })
+            children: /* @__PURE__ */ jsx10(FileDown, { size: 18 })
           }
         ),
         /* @__PURE__ */ jsxs9(
@@ -8217,12 +8538,12 @@ function Toolbar(props) {
             title: saveLabel ?? locale["toolbar.save"],
             disabled: isSaving,
             children: [
-              /* @__PURE__ */ jsx9(Save, { size: 18, style: { marginRight: "8px" } }),
-              /* @__PURE__ */ jsx9("span", { className: "hv-btn-label", children: isSaving ? locale.loading : saveLabel ?? locale["toolbar.save"] })
+              /* @__PURE__ */ jsx10(Save, { size: 18, style: { marginRight: "8px" } }),
+              /* @__PURE__ */ jsx10("span", { className: "hv-btn-label", children: isSaving ? locale.loading : saveLabel ?? locale["toolbar.save"] })
             ]
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "div",
           {
             className: "hv-sep",
@@ -8242,8 +8563,8 @@ function Toolbar(props) {
           onClick: props.onToggleAnnotationMode,
           title: locale["toolbar.annotate"],
           children: [
-            /* @__PURE__ */ jsx9(MessageSquarePlus, { size: 18, style: { marginRight: "8px" } }),
-            /* @__PURE__ */ jsx9("span", { className: "hv-btn-label", children: locale["toolbar.annotate"] })
+            /* @__PURE__ */ jsx10(MessageSquarePlus, { size: 18, style: { marginRight: "8px" } }),
+            /* @__PURE__ */ jsx10("span", { className: "hv-btn-label", children: locale["toolbar.annotate"] })
           ]
         }
       ),
@@ -8254,8 +8575,8 @@ function Toolbar(props) {
           onClick: props.onToggleSignatures,
           title: locale["toolbar.sign"],
           children: [
-            /* @__PURE__ */ jsx9(PenLine, { size: 18, style: { marginRight: "8px" } }),
-            /* @__PURE__ */ jsx9("span", { className: "hv-btn-label", children: locale["toolbar.sign"] })
+            /* @__PURE__ */ jsx10(PenLine, { size: 18, style: { marginRight: "8px" } }),
+            /* @__PURE__ */ jsx10("span", { className: "hv-btn-label", children: locale["toolbar.sign"] })
           ]
         }
       )
@@ -8264,7 +8585,7 @@ function Toolbar(props) {
 }
 // src/components/DocumentViewer.tsx
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 function createPlacementId() {
   return `sig-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 }
@@ -8352,44 +8673,44 @@ function DocumentViewer(props) {
     () => ({ ...defaultLocale, ...props.locale }),
     [props.locale]
   );
-  const [layout, setLayout] = useState8(
+  const [layout, setLayout] = useState9(
     props.defaultLayout ?? "single"
   );
-  const [showThumbnails, setShowThumbnails] = useState8(
+  const [showThumbnails, setShowThumbnails] = useState9(
     props.defaultShowThumbnails ?? true
   );
-  const [showHeaderFooterSlots, setShowHeaderFooterSlots] = useState8(true);
-  const [showSignatures, setShowSignatures] = useState8(false);
-  const [zoom, setZoom] = useState8(1);
+  const [showHeaderFooterSlots, setShowHeaderFooterSlots] = useState9(true);
+  const [showSignatures, setShowSignatures] = useState9(false);
+  const [zoom, setZoom] = useState9(1);
   const mainRef = useRef7(null);
   const zoomStageRef = useRef7(null);
   const exportHeaderRef = useRef7(null);
   const exportFooterRef = useRef7(null);
-  const [selectedSignature, setSelectedSignature] = useState8(
+  const [selectedSignature, setSelectedSignature] = useState9(
     null
   );
-  const [selectedSignatureColor, setSelectedSignatureColor] = useState8("black");
-  const [isPlacingAnnotation, setIsPlacingAnnotation] = useState8(false);
-  const [activePlacementId, setActivePlacementId] = useState8(
+  const [selectedSignatureColor, setSelectedSignatureColor] = useState9("black");
+  const [isPlacingAnnotation, setIsPlacingAnnotation] = useState9(false);
+  const [activePlacementId, setActivePlacementId] = useState9(
     null
   );
-  const [activeAnnotationId, setActiveAnnotationId] = useState8(
+  const [activeAnnotationId, setActiveAnnotationId] = useState9(
     null
   );
-  const [resolved, setResolved] = useState8(null);
-  const [loading, setLoading] = useState8(true);
-  const [error, setError] = useState8("");
-  const [isSaving, setIsSaving] = useState8(false);
-  const [pageCount, setPageCount] = useState8(1);
-  const [currentPage, setCurrentPage] = useState8(1);
-  const [thumbnails, setThumbnails] = useState8([]);
-  const [richTextExportState, setRichTextExportState] = useState8(null);
-  const [spreadsheetExportState, setSpreadsheetExportState] = useState8(null);
-  const [pptxExportState, setPptxExportState] = useState8(null);
-  const [internalPlacements, setInternalPlacements] = useState8(props.signaturePlacements ?? []);
-  const [internalAnnotations, setInternalAnnotations] = useState8(props.annotations ?? []);
-  const [zoomStageSize, setZoomStageSize] = useState8({ width: 0, height: 0 });
-  const [mainContentWidth, setMainContentWidth] = useState8(0);
+  const [resolved, setResolved] = useState9(null);
+  const [loading, setLoading] = useState9(true);
+  const [error, setError] = useState9("");
+  const [isSaving, setIsSaving] = useState9(false);
+  const [pageCount, setPageCount] = useState9(1);
+  const [currentPage, setCurrentPage] = useState9(1);
+  const [thumbnails, setThumbnails] = useState9([]);
+  const [richTextExportState, setRichTextExportState] = useState9(null);
+  const [spreadsheetExportState, setSpreadsheetExportState] = useState9(null);
+  const [pptxExportState, setPptxExportState] = useState9(null);
+  const [internalPlacements, setInternalPlacements] = useState9(props.signaturePlacements ?? []);
+  const [internalAnnotations, setInternalAnnotations] = useState9(props.annotations ?? []);
+  const [zoomStageSize, setZoomStageSize] = useState9({ width: 0, height: 0 });
+  const [mainContentWidth, setMainContentWidth] = useState9(0);
   const placements = useMemo9(
     () => (props.signaturePlacements ?? internalPlacements).map(
       (placement) => normalizeSignaturePlacement(placement)
@@ -8459,41 +8780,41 @@ function DocumentViewer(props) {
     })),
     [placements]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (props.signaturePlacements) {
       setInternalPlacements(props.signaturePlacements);
     }
   }, [props.signaturePlacements]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (props.annotations) {
       setInternalAnnotations(props.annotations);
     }
   }, [props.annotations]);
-  useEffect8(() => {
+  useEffect9(() => {
     setShowThumbnails(props.defaultShowThumbnails ?? true);
   }, [props.defaultShowThumbnails]);
-  useEffect8(() => {
+  useEffect9(() => {
     setLayout(props.defaultLayout ?? "single");
   }, [props.defaultLayout]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!signingEnabled) {
       setShowSignatures(false);
       setSelectedSignature(null);
       setActivePlacementId(null);
     }
   }, [signingEnabled]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!annotationEnabled) {
       setIsPlacingAnnotation(false);
       setActiveAnnotationId(null);
     }
   }, [annotationEnabled]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!headerFooterToggleEnabled) {
       setShowHeaderFooterSlots(true);
     }
   }, [headerFooterToggleEnabled]);
-  useEffect8(() => {
+  useEffect9(() => {
     let active = true;
     let cleanupSource;
     const loadFile = async () => {
@@ -8552,7 +8873,7 @@ function DocumentViewer(props) {
     props.fileUrl,
     requestedFileType
   ]);
-  useEffect8(() => {
+  useEffect9(() => {
     setZoom(1);
     setCurrentPage(1);
     setSelectedSignature(null);
@@ -8570,7 +8891,7 @@ function DocumentViewer(props) {
       setInternalAnnotations([]);
     }
   }, [mode, props.fileUrl, props.fileName, props.fileType, props.blob, props.base64]);
-  useEffect8(() => {
+  useEffect9(() => {
     const element = zoomStageRef.current;
     if (!element) {
       return;
@@ -8628,7 +8949,7 @@ function DocumentViewer(props) {
     showSignatures,
     showThumbnails
   ]);
-  useEffect8(() => {
+  useEffect9(() => {
     const element = mainRef.current;
     if (!element) {
       return;
@@ -9008,20 +9329,20 @@ function DocumentViewer(props) {
   };
   const renderContent = () => {
     if (error) {
-      return /* @__PURE__ */ jsxs10("div", { className: "hv-error-banner", children: [
-        /* @__PURE__ */ jsx10("strong", { children: locale["error.title"] }),
-        /* @__PURE__ */ jsx10("p", { children: error })
-      ] });
+      return /* @__PURE__ */ jsx11("div", { className: "hv-status-shell", children: /* @__PURE__ */ jsxs10("div", { className: "hv-error-banner", children: [
+        /* @__PURE__ */ jsx11("strong", { children: locale["error.title"] }),
+        /* @__PURE__ */ jsx11("p", { children: error })
+      ] }) });
     }
     if (loading || !resolved) {
-      return /* @__PURE__ */ jsxs10("div", { className: "hv-loader", children: [
-        /* @__PURE__ */ jsx10("div", { className: "hv-spinner" }),
-        /* @__PURE__ */ jsx10("span", { children: locale.loading })
-      ] });
+      return /* @__PURE__ */ jsx11("div", { className: "hv-status-shell", children: /* @__PURE__ */ jsxs10("div", { className: "hv-loader", children: [
+        /* @__PURE__ */ jsx11("div", { className: "hv-spinner" }),
+        /* @__PURE__ */ jsx11("span", { children: locale.loading })
+      ] }) });
     }
     const renderCapabilityNotice = (title, description, variant = "info") => /* @__PURE__ */ jsxs10("div", { className: `hv-info-banner${variant === "warning" ? " warning" : ""}`, children: [
-      /* @__PURE__ */ jsx10("strong", { children: title }),
-      /* @__PURE__ */ jsx10("p", { children: description })
+      /* @__PURE__ */ jsx11("strong", { children: title }),
+      /* @__PURE__ */ jsx11("p", { children: description })
     ] });
     const shouldShowModeAdjustedNotice = showModeFallbackNotice || showCreateUnsupportedNotice && hasRenderableSource;
     const modeAdjustedNotice = shouldShowModeAdjustedNotice ? renderCapabilityNotice(
@@ -9032,7 +9353,7 @@ function DocumentViewer(props) {
       ).replace("{fileType}", getReadableFileTypeLabel(resolved.fileType))
     ) : null;
     if (showCreateUnsupportedNotice && !hasRenderableSource) {
-      return /* @__PURE__ */ jsx10("div", { className: "hv-page-container", style: { padding: "32px" }, children: renderCapabilityNotice(
+      return /* @__PURE__ */ jsx11("div", { className: "hv-page-container", style: { padding: "32px" }, children: renderCapabilityNotice(
         locale["documents.createUnsupportedTitle"],
         locale["documents.createUnsupportedDescription"].replace(
           "{formats}",
@@ -9057,7 +9378,7 @@ function DocumentViewer(props) {
       case "pdf":
         return /* @__PURE__ */ jsxs10(Fragment4, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             PdfRenderer,
             {
               url: resolved.url,
@@ -9073,7 +9394,7 @@ function DocumentViewer(props) {
       case "md":
         return /* @__PURE__ */ jsxs10(Fragment4, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             RichTextEditor,
             {
               mode: effectiveMode,
@@ -9087,7 +9408,7 @@ function DocumentViewer(props) {
       case "xls":
         return /* @__PURE__ */ jsxs10(Fragment4, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             SpreadsheetEditor,
             {
               mode: effectiveMode,
@@ -9100,7 +9421,7 @@ function DocumentViewer(props) {
       case "ppt":
         return /* @__PURE__ */ jsxs10(Fragment4, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             PptxRenderer,
             {
               onExportStateChange: setPptxExportState,
@@ -9116,18 +9437,18 @@ function DocumentViewer(props) {
       case "svg":
         return /* @__PURE__ */ jsxs10(Fragment4, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ jsx10(ImageRenderer, { ...commonProps, fileType: resolved.fileType })
+          /* @__PURE__ */ jsx11(ImageRenderer, { ...commonProps, fileType: resolved.fileType })
         ] });
       default:
-        return /* @__PURE__ */ jsxs10("div", { className: "hv-error-banner", children: [
+        return /* @__PURE__ */ jsx11("div", { className: "hv-status-shell", children: /* @__PURE__ */ jsxs10("div", { className: "hv-error-banner", children: [
           locale["documents.unsupportedFileType"],
           ": ",
           resolved.fileType
-        ] });
+        ] }) });
     }
   };
   return /* @__PURE__ */ jsxs10("div", { className: "hv-root", "data-hv-theme": theme, children: [
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       Toolbar,
       {
         fileName: resolved?.fileName,
@@ -9175,7 +9496,7 @@ function DocumentViewer(props) {
       }
     ),
     (props.headerComponent || props.footerComponent) && /* @__PURE__ */ jsxs10("div", { className: "hv-export-slot-host", "aria-hidden": "true", children: [
-      props.headerComponent && /* @__PURE__ */ jsx10(
+      props.headerComponent && /* @__PURE__ */ jsx11(
         "div",
         {
           ref: exportHeaderRef,
@@ -9183,7 +9504,7 @@ function DocumentViewer(props) {
           children: props.headerComponent
         }
       ),
-      props.footerComponent && /* @__PURE__ */ jsx10(
+      props.footerComponent && /* @__PURE__ */ jsx11(
         "div",
         {
           ref: exportFooterRef,
@@ -9193,7 +9514,7 @@ function DocumentViewer(props) {
       )
     ] }),
     /* @__PURE__ */ jsxs10("div", { className: "hv-shell", children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         ThumbnailsSidebar,
         {
           isOpen: showThumbnails,
@@ -9203,15 +9524,15 @@ function DocumentViewer(props) {
           locale
         }
       ),
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         "main",
         {
           ref: mainRef,
           className: `hv-main${isRichTextAuthoringMode ? " hv-main-richtext-authoring" : ""}`,
-          children: /* @__PURE__ */ jsx10("div", { className: "hv-zoom-shell", style: zoomShellStyle, children: /* @__PURE__ */ jsx10("div", { ref: zoomStageRef, className: "hv-zoom-stage", style: zoomStageStyle, children: renderContent() }) })
+          children: /* @__PURE__ */ jsx11("div", { className: "hv-zoom-shell", style: zoomShellStyle, children: /* @__PURE__ */ jsx11("div", { ref: zoomStageRef, className: "hv-zoom-stage", style: zoomStageStyle, children: renderContent() }) })
         }
       ),
-      signingEnabled && /* @__PURE__ */ jsx10(
+      signingEnabled && /* @__PURE__ */ jsx11(
         SignaturePanel,
         {
           isOpen: showSignatures,