@zerohive/hive-viewer 2.0.2 → 2.0.4

package/dist/index.mjs

@@ -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 { memo, useEffect, useState } from "react";
 
 // src/utils/signature.ts
 var SIGNATURE_INK_COLORS = [
@@ -89,23 +92,449 @@ function normalizeSignaturePlacement(placement) {
   };
 }
 
+// src/utils/signatureImage.ts
+var signatureAlphaSourceCache = /* @__PURE__ */ new Map();
+var renderedSignatureCache = /* @__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 computeLuminance(red, green, blue) {
+  return red * 0.2126 + green * 0.7152 + blue * 0.0722;
+}
+function clamp01(value) {
+  return Math.min(1, Math.max(0, value));
+}
+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 measureAlphaBounds(alphaMask, width, height, alphaThreshold = 8) {
+  let minX = width;
+  let minY = height;
+  let maxX = -1;
+  let maxY = -1;
+  for (let y = 0; y < height; y += 1) {
+    for (let x = 0; x < width; x += 1) {
+      const alpha = alphaMask[y * width + x];
+      if (alpha <= alphaThreshold) {
+        continue;
+      }
+      minX = Math.min(minX, x);
+      minY = Math.min(minY, y);
+      maxX = Math.max(maxX, x);
+      maxY = Math.max(maxY, y);
+    }
+  }
+  if (maxX < minX || maxY < minY) {
+    return { sx: 0, sy: 0, sw: width, sh: height };
+  }
+  const padding = Math.max(6, Math.round(Math.max(width, height) * 0.04));
+  const sx = Math.max(0, minX - padding);
+  const sy = Math.max(0, minY - padding);
+  const sw = Math.min(width - sx, maxX - minX + 1 + padding * 2);
+  const sh = Math.min(height - sy, maxY - minY + 1 + padding * 2);
+  return { sx, sy, sw, sh };
+}
+function createAlphaMaskFromTransparency(pixels) {
+  const alphaMask = new Uint8ClampedArray(pixels.length / 4);
+  for (let pixelIndex = 0; pixelIndex < alphaMask.length; pixelIndex += 1) {
+    alphaMask[pixelIndex] = pixels[pixelIndex * 4 + 3];
+  }
+  return alphaMask;
+}
+function createAlphaMaskFromSolidBackground(pixels, width, height, background) {
+  const alphaMask = new Uint8ClampedArray(width * height);
+  let foregroundPixels = 0;
+  let maxAlpha = 0;
+  const backgroundLuminance = computeLuminance(
+    background[0],
+    background[1],
+    background[2]
+  );
+  for (let pixelIndex = 0; pixelIndex < alphaMask.length; pixelIndex += 1) {
+    const offset = pixelIndex * 4;
+    const red = pixels[offset];
+    const green = pixels[offset + 1];
+    const blue = pixels[offset + 2];
+    const alpha = pixels[offset + 3] / 255;
+    const distance = colorDistance(
+      red,
+      green,
+      blue,
+      background[0],
+      background[1],
+      background[2]
+    );
+    const channelDelta = Math.max(
+      Math.abs(red - background[0]),
+      Math.abs(green - background[1]),
+      Math.abs(blue - background[2])
+    );
+    const luminance = computeLuminance(red, green, blue);
+    const luminanceDelta = Math.abs(luminance - backgroundLuminance);
+    const strength = clamp01(
+      Math.max(distance / 120, channelDelta / 90, luminanceDelta / 72)
+    );
+    const sharpened = strength <= 0.06 ? 0 : Math.pow(strength, 0.68);
+    const outputAlpha = Math.round(sharpened * alpha * 255);
+    alphaMask[pixelIndex] = outputAlpha;
+    if (outputAlpha > 10) {
+      foregroundPixels += 1;
+      maxAlpha = Math.max(maxAlpha, outputAlpha);
+    }
+  }
+  const totalPixels = width * height;
+  if (foregroundPixels < Math.max(24, totalPixels * 15e-4) || foregroundPixels > totalPixels * 0.42 || maxAlpha === 0) {
+    return null;
+  }
+  const normalizeScale = 255 / maxAlpha;
+  for (let pixelIndex = 0; pixelIndex < alphaMask.length; pixelIndex += 1) {
+    const alpha = alphaMask[pixelIndex];
+    if (alpha === 0) {
+      continue;
+    }
+    const normalized = Math.min(
+      255,
+      Math.round(Math.pow(alpha * normalizeScale / 255, 0.92) * 255)
+    );
+    alphaMask[pixelIndex] = normalized <= 10 ? 0 : normalized;
+  }
+  return alphaMask;
+}
+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)
+  ];
+}
+function createTintedSignatureCanvas(alphaSource, inkColor) {
+  if (!alphaSource.alphaMask) {
+    return null;
+  }
+  const { bounds } = alphaSource;
+  const canvas = createCanvas(bounds.sw, bounds.sh);
+  const context = canvas.getContext("2d");
+  if (!context) {
+    return null;
+  }
+  const output = context.createImageData(bounds.sw, bounds.sh);
+  const ink = parseInkColor(inkColor);
+  for (let y = 0; y < bounds.sh; y += 1) {
+    for (let x = 0; x < bounds.sw; x += 1) {
+      const sourceIndex = (bounds.sy + y) * alphaSource.width + bounds.sx + x;
+      const targetIndex = (y * bounds.sw + x) * 4;
+      output.data[targetIndex] = ink[0];
+      output.data[targetIndex + 1] = ink[1];
+      output.data[targetIndex + 2] = ink[2];
+      output.data[targetIndex + 3] = alphaSource.alphaMask[sourceIndex];
+    }
+  }
+  context.putImageData(output, 0, 0);
+  return canvas;
+}
+async function getSignatureAlphaSource(source) {
+  const resolvedSource = ensureSignatureSource(source);
+  const cached = signatureAlphaSourceCache.get(resolvedSource);
+  if (cached) {
+    return cached;
+  }
+  const pending = (async () => {
+    const image = await loadSignatureImage(resolvedSource);
+    const fallbackBounds = {
+      sx: 0,
+      sy: 0,
+      sw: image.width,
+      sh: image.height
+    };
+    const canvas = createCanvas(image.width, image.height);
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return {
+        source: resolvedSource,
+        width: image.width,
+        height: image.height,
+        alphaMask: null,
+        bounds: fallbackBounds
+      };
+    }
+    context.drawImage(image, 0, 0, image.width, image.height);
+    let imageData;
+    try {
+      imageData = context.getImageData(0, 0, canvas.width, canvas.height);
+    } catch {
+      return {
+        source: resolvedSource,
+        width: image.width,
+        height: image.height,
+        alphaMask: null,
+        bounds: fallbackBounds
+      };
+    }
+    const alphaMask = hasMeaningfulTransparency(imageData.data) ? createAlphaMaskFromTransparency(imageData.data) : (() => {
+      const background = detectUniformBackground(
+        imageData.data,
+        canvas.width,
+        canvas.height
+      );
+      return background ? createAlphaMaskFromSolidBackground(
+        imageData.data,
+        canvas.width,
+        canvas.height,
+        background
+      ) : null;
+    })();
+    if (!alphaMask) {
+      return {
+        source: resolvedSource,
+        width: image.width,
+        height: image.height,
+        alphaMask: null,
+        bounds: fallbackBounds
+      };
+    }
+    return {
+      source: resolvedSource,
+      width: image.width,
+      height: image.height,
+      alphaMask,
+      bounds: measureAlphaBounds(alphaMask, image.width, image.height)
+    };
+  })().catch(async () => {
+    const image = await loadSignatureImage(resolvedSource);
+    return {
+      source: resolvedSource,
+      width: image.width,
+      height: image.height,
+      alphaMask: null,
+      bounds: { sx: 0, sy: 0, sw: image.width, sh: image.height }
+    };
+  });
+  signatureAlphaSourceCache.set(resolvedSource, pending);
+  return pending;
+}
+async function getSignatureRenderMetrics(source) {
+  const alphaSource = await getSignatureAlphaSource(source);
+  const width = alphaSource.alphaMask ? alphaSource.bounds.sw : alphaSource.width;
+  const height = alphaSource.alphaMask ? alphaSource.bounds.sh : alphaSource.height;
+  return {
+    width,
+    height,
+    aspectRatio: width > 0 && height > 0 ? width / height : 3.1,
+    canTint: Boolean(alphaSource.alphaMask)
+  };
+}
+async function getRenderableSignatureImage(source, inkColor) {
+  const resolvedSource = ensureSignatureSource(source);
+  const normalizedInkColor = normalizeSignatureInkColor(inkColor);
+  const cacheKey = `${normalizedInkColor}::${resolvedSource}`;
+  const cached = renderedSignatureCache.get(cacheKey);
+  if (cached) {
+    return cached;
+  }
+  const pending = (async () => {
+    const alphaSource = await getSignatureAlphaSource(resolvedSource);
+    if (!alphaSource.alphaMask) {
+      return alphaSource.source;
+    }
+    const tintedCanvas = createTintedSignatureCanvas(
+      alphaSource,
+      normalizedInkColor
+    );
+    return tintedCanvas ? tintedCanvas.toDataURL("image/png") : alphaSource.source;
+  })().catch(() => resolvedSource);
+  renderedSignatureCache.set(cacheKey, pending);
+  return pending;
+}
+
+// src/components/RenderableSignatureImage.tsx
+import { jsx } from "react/jsx-runtime";
+var RenderableSignatureImage = memo(function RenderableSignatureImage2(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 });
+});
+RenderableSignatureImage.displayName = "RenderableSignatureImage";
+
 // src/components/SignatureOverlay.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DEFAULT_SIGNATURE_ASPECT_RATIO = 3.1;
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
-function getDefaultPlacementSize(kind) {
+function clampAspectRatio(value) {
+  return clamp(value, 1.8, 6.2);
+}
+function getDefaultSurfaceAspectRatio(kind) {
   switch (kind) {
-    case "sheet":
-      return { width: 0.3, height: 0.16 };
     case "slide":
-      return { width: 0.34, height: 0.18 };
+      return 16 / 9;
+    case "sheet":
+      return 1.9;
     case "image":
-      return { width: 0.36, height: 0.18 };
+      return 1;
     default:
-      return { width: 0.34, height: 0.16 };
+      return 816 / 1056;
   }
 }
+function getSignatureCardAspectRatio(aspectRatio = DEFAULT_SIGNATURE_ASPECT_RATIO) {
+  return clamp(aspectRatio * 0.78, 1.35, 4.8);
+}
+function getDefaultPlacementSize(kind, aspectRatio = DEFAULT_SIGNATURE_ASPECT_RATIO, surfaceAspectRatio = getDefaultSurfaceAspectRatio(kind)) {
+  const effectiveAspectRatio = getSignatureCardAspectRatio(
+    clampAspectRatio(aspectRatio)
+  );
+  const effectiveSurfaceAspectRatio = clamp(surfaceAspectRatio, 0.45, 2.8);
+  const heightTarget = kind === "sheet" ? 0.11 : kind === "slide" ? 0.135 : kind === "image" ? 0.14 : 0.115;
+  const widthMin = kind === "sheet" ? 0.2 : kind === "slide" ? 0.22 : kind === "image" ? 0.24 : 0.22;
+  const widthMax = kind === "sheet" ? 0.38 : kind === "slide" ? 0.44 : kind === "image" ? 0.48 : 0.4;
+  const heightMax = kind === "sheet" ? 0.18 : kind === "slide" ? 0.2 : kind === "image" ? 0.22 : 0.19;
+  const width = clamp(
+    heightTarget * effectiveAspectRatio / effectiveSurfaceAspectRatio,
+    widthMin,
+    widthMax
+  );
+  const height = clamp(
+    width * effectiveSurfaceAspectRatio / effectiveAspectRatio,
+    0.075,
+    heightMax
+  );
+  return { width, height };
+}
 function getDefaultAnnotationSize(kind) {
   switch (kind) {
     case "sheet":
@@ -123,9 +552,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,
@@ -136,11 +562,13 @@ function SignatureOverlay(props) {
     placements,
     annotations,
     pendingSignature,
+    pendingSignatureColor,
     pendingAnnotation,
     activePlacementId,
     activeAnnotationId,
     placeHint,
     annotationHint,
+    cancelPlacementLabel,
     annotationPlaceholder,
     signatureAltLabel,
     signatureAltByLabel,
@@ -160,10 +588,21 @@ function SignatureOverlay(props) {
     onRemovePlacement,
     onRemoveAnnotation,
     onSelectPlacement,
-    onSelectAnnotation
+    onSelectAnnotation,
+    onCancelPlacementMode
   } = props;
   const layerRef = useRef(null);
-  const [dragState, setDragState] = useState(null);
+  const [dragState, setDragState] = useState2(null);
+  const [dragPreview, setDragPreview] = useState2(null);
+  const [placementPreview, setPlacementPreview] = useState2(
+    null
+  );
+  const [pendingSignatureAspectRatio, setPendingSignatureAspectRatio] = useState2(
+    DEFAULT_SIGNATURE_ASPECT_RATIO
+  );
+  const [surfaceAspectRatio, setSurfaceAspectRatio] = useState2(
+    () => getDefaultSurfaceAspectRatio(surfaceKind)
+  );
   const visiblePlacements = useMemo(
     () => placements.filter((placement) => placement.surfaceKey === surfaceKey),
     [placements, surfaceKey]
@@ -177,7 +616,106 @@ function SignatureOverlay(props) {
     [visibleAnnotations]
   );
   const captureMode = pendingSignature ? "signature" : pendingAnnotation ? "annotation" : null;
-  useEffect(() => {
+  const defaultSignatureSize = useMemo(
+    () => getDefaultPlacementSize(
+      surfaceKind,
+      pendingSignatureAspectRatio,
+      surfaceAspectRatio
+    ),
+    [pendingSignatureAspectRatio, surfaceAspectRatio, surfaceKind]
+  );
+  const defaultAnnotationSize = useMemo(
+    () => getDefaultAnnotationSize(surfaceKind),
+    [surfaceKind]
+  );
+  const previewGeometry = useMemo(() => {
+    if (!placementPreview || !captureMode) {
+      return null;
+    }
+    const size = captureMode === "signature" ? defaultSignatureSize : defaultAnnotationSize;
+    return {
+      width: size.width,
+      height: size.height,
+      x: clamp(placementPreview.x - size.width / 2, 0, 1 - size.width),
+      y: clamp(placementPreview.y - size.height / 2, 0, 1 - size.height)
+    };
+  }, [
+    captureMode,
+    defaultAnnotationSize,
+    defaultSignatureSize,
+    placementPreview
+  ]);
+  useEffect2(() => {
+    const element = layerRef.current;
+    if (!element) {
+      return;
+    }
+    const syncSurfaceAspectRatio = () => {
+      const rect = element.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) {
+        return;
+      }
+      const nextAspectRatio = rect.width / rect.height;
+      setSurfaceAspectRatio(
+        (current) => Math.abs(current - nextAspectRatio) < 1e-3 ? current : nextAspectRatio
+      );
+    };
+    syncSurfaceAspectRatio();
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      syncSurfaceAspectRatio();
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [surfaceKey, surfaceKind]);
+  useEffect2(() => {
+    if (!pendingSignature?.signatureImageUrl) {
+      setPendingSignatureAspectRatio(DEFAULT_SIGNATURE_ASPECT_RATIO);
+      return;
+    }
+    let cancelled = false;
+    void getSignatureRenderMetrics(pendingSignature.signatureImageUrl).then((metrics) => {
+      if (!cancelled) {
+        setPendingSignatureAspectRatio(
+          clampAspectRatio(metrics.aspectRatio || DEFAULT_SIGNATURE_ASPECT_RATIO)
+        );
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setPendingSignatureAspectRatio(DEFAULT_SIGNATURE_ASPECT_RATIO);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [pendingSignature?.signatureImageUrl]);
+  useEffect2(() => {
+    if (!captureMode) {
+      setPlacementPreview(null);
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      event.preventDefault();
+      onCancelPlacementMode();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [captureMode, onCancelPlacementMode]);
+  useEffect2(() => {
+    if (!dragState) {
+      setDragPreview(null);
+    }
+  }, [dragState]);
+  useEffect2(() => {
     if (captureMode || dragState) {
       return;
     }
@@ -196,7 +734,7 @@ function SignatureOverlay(props) {
       window.removeEventListener("pointerdown", handlePointerDown, true);
     };
   }, [captureMode, dragState, onSelectAnnotation, onSelectPlacement]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!dragState) {
       return;
     }
@@ -215,11 +753,12 @@ function SignatureOverlay(props) {
           0,
           1 - dragState.originHeight
         );
-        if (dragState.targetType === "signature") {
-          onUpdatePlacement(dragState.id, { x: nextX, y: nextY });
-          return;
-        }
-        onUpdateAnnotation(dragState.id, { x: nextX, y: nextY });
+        setDragPreview({
+          x: nextX,
+          y: nextY,
+          width: dragState.originWidth,
+          height: dragState.originHeight
+        });
         return;
       }
       if (dragState.targetType === "signature") {
@@ -233,7 +772,9 @@ function SignatureOverlay(props) {
           0.035,
           1 - dragState.originY
         );
-        onUpdatePlacement(dragState.id, {
+        setDragPreview({
+          x: dragState.originX,
+          y: dragState.originY,
           width: nextWidth2,
           height: nextHeight2
         });
@@ -249,12 +790,22 @@ function SignatureOverlay(props) {
         0.08,
         1 - dragState.originY
       );
-      onUpdateAnnotation(dragState.id, {
+      setDragPreview({
+        x: dragState.originX,
+        y: dragState.originY,
         width: nextWidth,
         height: nextHeight
       });
     };
     const handlePointerUp = () => {
+      if (dragPreview) {
+        if (dragState.targetType === "signature") {
+          onUpdatePlacement(dragState.id, dragPreview);
+        } else {
+          onUpdateAnnotation(dragState.id, dragPreview);
+        }
+      }
+      setDragPreview(null);
       setDragState(null);
     };
     window.addEventListener("pointermove", handlePointerMove);
@@ -263,7 +814,7 @@ function SignatureOverlay(props) {
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
     };
-  }, [dragState, onUpdateAnnotation, onUpdatePlacement]);
+  }, [dragPreview, dragState, onUpdateAnnotation, onUpdatePlacement]);
   const handlePlace = (event) => {
     if (!layerRef.current || !captureMode) {
       return;
@@ -272,7 +823,7 @@ function SignatureOverlay(props) {
     const clickX = (event.clientX - rect.left) / rect.width;
     const clickY = (event.clientY - rect.top) / rect.height;
     if (captureMode === "signature" && pendingSignature) {
-      const { width, height } = getDefaultPlacementSize(surfaceKind);
+      const { width, height } = defaultSignatureSize;
       onPlaceSignature({
         signature: pendingSignature,
         surfaceKey,
@@ -288,7 +839,7 @@ function SignatureOverlay(props) {
       return;
     }
     if (captureMode === "annotation") {
-      const { width, height } = getDefaultAnnotationSize(surfaceKind);
+      const { width, height } = defaultAnnotationSize;
       onPlaceAnnotation({
         surfaceKey,
         surfaceKind,
@@ -303,6 +854,16 @@ function SignatureOverlay(props) {
       });
     }
   };
+  const updatePlacementPreview = (clientX, clientY) => {
+    if (!layerRef.current) {
+      return;
+    }
+    const rect = layerRef.current.getBoundingClientRect();
+    setPlacementPreview({
+      x: clamp((clientX - rect.left) / rect.width, 0, 1),
+      y: clamp((clientY - rect.top) / rect.height, 0, 1)
+    });
+  };
   const beginDrag = (event, target, mode) => {
     if (!layerRef.current) {
       return;
@@ -312,6 +873,7 @@ function SignatureOverlay(props) {
     if (target.kind === "signature") {
       onSelectPlacement(target.item.id);
       onSelectAnnotation(null);
+      setDragPreview(null);
       setDragState({
         id: target.item.id,
         targetType: "signature",
@@ -329,6 +891,7 @@ function SignatureOverlay(props) {
     }
     onSelectAnnotation(target.item.id);
     onSelectPlacement(null);
+    setDragPreview(null);
     setDragState({
       id: target.item.id,
       targetType: "annotation",
@@ -342,42 +905,134 @@ function SignatureOverlay(props) {
       rect: layerRef.current.getBoundingClientRect()
     });
   };
+  const getSignatureGeometry = (placement) => dragState?.targetType === "signature" && dragState.id === placement.id && dragPreview ? dragPreview : {
+    x: placement.x,
+    y: placement.y,
+    width: placement.width,
+    height: placement.height
+  };
+  const getAnnotationGeometry = (annotation) => dragState?.targetType === "annotation" && dragState.id === annotation.id && dragPreview ? dragPreview : {
+    x: annotation.x,
+    y: annotation.y,
+    width: annotation.width,
+    height: annotation.height
+  };
   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__ */ jsxs(
+      "div",
+      {
+        className: "hv-signature-overlay-capture",
+        onClick: handlePlace,
+        onPointerEnter: (event) => updatePlacementPreview(event.clientX, event.clientY),
+        onPointerMove: (event) => updatePlacementPreview(event.clientX, event.clientY),
+        onPointerLeave: () => setPlacementPreview(null),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "hv-signature-overlay-banner",
+              onPointerDown: (event) => {
+                event.stopPropagation();
+              },
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "hv-signature-overlay-banner-copy", children: [
+                  /* @__PURE__ */ jsx2("strong", { className: "hv-signature-overlay-title", children: captureMode === "annotation" ? annotationTitle : signatureAltLabel }),
+                  /* @__PURE__ */ jsx2("span", { className: "hv-signature-overlay-hint", children: captureMode === "annotation" ? annotationHint : placeHint })
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    className: "hv-signature-overlay-cancel",
+                    onPointerDown: (event) => {
+                      event.stopPropagation();
+                    },
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      onCancelPlacementMode();
+                    },
+                    children: cancelPlacementLabel
+                  }
+                )
+              ]
+            }
+          ),
+          captureMode === "signature" && previewGeometry && pendingSignature && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "hv-signature-stamp hv-signature-ghost",
+              style: {
+                left: `${previewGeometry.x * 100}%`,
+                top: `${previewGeometry.y * 100}%`,
+                width: `${previewGeometry.width * 100}%`,
+                height: `${previewGeometry.height * 100}%`
+              },
+              children: [
+                /* @__PURE__ */ jsx2("div", { className: "hv-signature-image-wrap", children: /* @__PURE__ */ jsx2(
+                  RenderableSignatureImage,
+                  {
+                    signatureImageUrl: pendingSignature.signatureImageUrl,
+                    inkColor: pendingSignatureColor,
+                    alt: signatureAltLabel,
+                    className: "hv-signature-image"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "hv-signature-meta", children: [
+                  pendingSignature.signedBy?.trim() && /* @__PURE__ */ jsx2("span", { className: "hv-signature-meta-name", children: pendingSignature.signedBy.trim() }),
+                  pendingSignature.jobTitle?.trim() && /* @__PURE__ */ jsx2("span", { className: "hv-signature-meta-jobtitle", children: pendingSignature.jobTitle.trim() }),
+                  /* @__PURE__ */ jsx2("span", { className: "hv-signature-meta-date", children: normalizeSignatureDate(pendingSignature.dateSigned) })
+                ] })
+              ]
+            }
+          ),
+          captureMode === "annotation" && previewGeometry && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "hv-annotation-card hv-annotation-ghost",
+              style: {
+                left: `${previewGeometry.x * 100}%`,
+                top: `${previewGeometry.y * 100}%`,
+                width: `${previewGeometry.width * 100}%`,
+                height: `${previewGeometry.height * 100}%`
+              },
+              children: [
+                /* @__PURE__ */ jsx2("div", { className: "hv-annotation-header", children: /* @__PURE__ */ jsx2("div", { className: "hv-annotation-header-copy", children: /* @__PURE__ */ jsx2("span", { className: "hv-annotation-title", children: annotationTitle }) }) }),
+                /* @__PURE__ */ jsx2("div", { className: "hv-annotation-body", children: /* @__PURE__ */ jsx2("div", { className: "hv-annotation-preview empty", children: annotationPlaceholder }) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
     visiblePlacements.map((placement) => {
+      const placementGeometry = getSignatureGeometry(placement);
       const isActive = placement.id === activePlacementId;
       const hasLinkedAnnotation = linkedAnnotationIds.has(placement.id);
       const signer = placement.signature.signedBy?.trim();
       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",
         {
           className: `hv-signature-stamp ${isActive ? "active" : ""}`,
           style: {
-            left: `${placement.x * 100}%`,
-            top: `${placement.y * 100}%`,
-            width: `${placement.width * 100}%`,
-            height: `${placement.height * 100}%`
-          },
-          onPointerDown: (event) => {
-            if (!isActive) {
-              event.stopPropagation();
-              onSelectPlacement(placement.id);
-              onSelectAnnotation(null);
-              return;
-            }
-            beginDrag(event, { kind: "signature", item: placement }, "move");
+            left: `${placementGeometry.x * 100}%`,
+            top: `${placementGeometry.y * 100}%`,
+            width: `${placementGeometry.width * 100}%`,
+            height: `${placementGeometry.height * 100}%`
           },
+          onPointerDown: (event) => beginDrag(event, { kind: "signature", item: placement }, "move"),
           onClick: (event) => {
             event.stopPropagation();
             onSelectPlacement(placement.id);
             onSelectAnnotation(null);
           },
           children: [
-            isActive && /* @__PURE__ */ jsx(
+            isActive && /* @__PURE__ */ jsx2(
               "button",
               {
                 type: "button",
@@ -393,25 +1048,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 +1074,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 +1090,7 @@ function SignatureOverlay(props) {
                 ]
               }
             ),
-            isActive && /* @__PURE__ */ jsx(
+            isActive && /* @__PURE__ */ jsx2(
               "div",
               {
                 className: "hv-signature-resize",
@@ -456,18 +1107,19 @@ function SignatureOverlay(props) {
       );
     }),
     visibleAnnotations.map((annotation) => {
+      const annotationGeometry = getAnnotationGeometry(annotation);
       const isActive = annotation.id === activeAnnotationId;
       const isLinked = Boolean(annotation.linkedSignaturePlacementId);
       const hasText = annotation.text.trim().length > 0;
       if (!isActive) {
-        return /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx2(
           "button",
           {
             type: "button",
             className: `hv-annotation-chip ${isLinked ? "linked" : ""} ${hasText ? "" : "empty"}`,
             style: {
-              left: `${annotation.x * 100}%`,
-              top: `${annotation.y * 100}%`
+              left: `${annotationGeometry.x * 100}%`,
+              top: `${annotationGeometry.y * 100}%`
             },
             "aria-label": hasText ? annotation.text : openAnnotationLabel,
             title: hasText ? annotation.text : openAnnotationLabel,
@@ -476,7 +1128,7 @@ function SignatureOverlay(props) {
               onSelectAnnotation(annotation.id);
               onSelectPlacement(null);
             },
-            children: /* @__PURE__ */ jsx(MessageSquare, { size: 14 })
+            children: /* @__PURE__ */ jsx2(MessageSquare, { size: 14 })
           },
           annotation.id
         );
@@ -486,10 +1138,10 @@ function SignatureOverlay(props) {
         {
           className: `hv-annotation-card ${isActive ? "active" : ""} ${isLinked ? "linked" : ""}`,
           style: {
-            left: `${annotation.x * 100}%`,
-            top: `${annotation.y * 100}%`,
-            width: `${annotation.width * 100}%`,
-            height: `${annotation.height * 100}%`
+            left: `${annotationGeometry.x * 100}%`,
+            top: `${annotationGeometry.y * 100}%`,
+            width: `${annotationGeometry.width * 100}%`,
+            height: `${annotationGeometry.height * 100}%`
           },
           onClick: (event) => {
             event.stopPropagation();
@@ -516,10 +1168,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 +1190,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 +1204,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 +2046,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 +2087,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 +2438,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 +2638,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 +2685,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 +2694,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 +2730,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 +2928,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 +2937,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 +3262,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 +3397,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 +3515,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 +3681,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 +3806,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 +3858,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 +3902,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 +4259,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 +4350,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 +4368,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 +4398,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 +4755,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 +4823,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 +4884,7 @@ function RichTextEditor(props) {
     props.locale,
     props.mode
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isAuthoringMode || !editorRef.current) {
       return;
     }
@@ -4252,7 +4893,7 @@ function RichTextEditor(props) {
     }
     refreshToolbarState();
   }, [editableContentHtml, isAuthoringMode]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isAuthoringMode || typeof document === "undefined") {
       return;
     }
@@ -4272,12 +4913,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 +4935,7 @@ function RichTextEditor(props) {
       mediaQuery.removeEventListener("change", syncCompactState);
     };
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (toolbarState.hasSelectedImage && toolbarState.imageSrc) {
       setImageEditorState({
         src: toolbarState.imageSrc,
@@ -4316,7 +4957,7 @@ function RichTextEditor(props) {
     toolbarState.imageScale,
     toolbarState.imageSrc
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!useDocxPreviewView || !docxPreviewRef.current || !props.arrayBuffer) {
       setDocxPages([]);
       setDocxPreviewFailed(false);
@@ -4415,13 +5056,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 +5141,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 +5176,7 @@ function RichTextEditor(props) {
     props.onExportStateChange,
     useDocxPreviewView
   ]);
-  useEffect2(() => {
+  useEffect3(() => {
     return () => {
       props.onExportStateChange?.(null);
     };
@@ -4822,7 +5482,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 +5493,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 +5515,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 +5523,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 +5537,7 @@ function RichTextEditor(props) {
               {
                 className: "hv-page-container hv-docx-page-surface",
                 children: [
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     "img",
                     {
                       src: page.imageUrl,
@@ -4885,7 +5545,7 @@ function RichTextEditor(props) {
                       className: "hv-docx-page-image"
                     }
                   ),
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     SignatureOverlay,
                     {
                       surfaceKey: page.surfaceKey,
@@ -4894,11 +5554,13 @@ function RichTextEditor(props) {
                       placements: props.signatureOverlay.placements,
                       annotations: props.signatureOverlay.annotations,
                       pendingSignature: props.signatureOverlay.pendingSignature,
+                      pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
                       pendingAnnotation: props.signatureOverlay.pendingAnnotation,
                       activePlacementId: props.signatureOverlay.activePlacementId,
                       activeAnnotationId: props.signatureOverlay.activeAnnotationId,
                       placeHint: props.signatureOverlay.placeHint,
                       annotationHint: props.signatureOverlay.annotationHint,
+                      cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
                       annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
                       signatureAltLabel: props.signatureOverlay.signatureAltLabel,
                       signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -4918,7 +5580,8 @@ function RichTextEditor(props) {
                       onRemovePlacement: props.signatureOverlay.onRemovePlacement,
                       onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
                       onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-                      onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+                      onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+                      onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
                     }
                   )
                 ]
@@ -4930,9 +5593,69 @@ 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,
+            pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
+            pendingAnnotation: props.signatureOverlay.pendingAnnotation,
+            activePlacementId: props.signatureOverlay.activePlacementId,
+            activeAnnotationId: props.signatureOverlay.activeAnnotationId,
+            placeHint: props.signatureOverlay.placeHint,
+            annotationHint: props.signatureOverlay.annotationHint,
+            cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
+            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,
+            onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
+          }
+        )
+      ] }) })
+    ] });
+  }
   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 +5663,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 +5677,7 @@ function RichTextEditor(props) {
               {
                 className: "hv-page-container hv-docx-page-surface",
                 children: [
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     "img",
                     {
                       src: page.imageUrl,
@@ -4962,7 +5685,7 @@ function RichTextEditor(props) {
                       className: "hv-docx-page-image"
                     }
                   ),
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     SignatureOverlay,
                     {
                       surfaceKey: page.surfaceKey,
@@ -4971,11 +5694,13 @@ function RichTextEditor(props) {
                       placements: props.signatureOverlay.placements,
                       annotations: props.signatureOverlay.annotations,
                       pendingSignature: props.signatureOverlay.pendingSignature,
+                      pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
                       pendingAnnotation: props.signatureOverlay.pendingAnnotation,
                       activePlacementId: props.signatureOverlay.activePlacementId,
                       activeAnnotationId: props.signatureOverlay.activeAnnotationId,
                       placeHint: props.signatureOverlay.placeHint,
                       annotationHint: props.signatureOverlay.annotationHint,
+                      cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
                       annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
                       signatureAltLabel: props.signatureOverlay.signatureAltLabel,
                       signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -4995,7 +5720,8 @@ function RichTextEditor(props) {
                       onRemovePlacement: props.signatureOverlay.onRemovePlacement,
                       onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
                       onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-                      onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+                      onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+                      onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
                     }
                   )
                 ]
@@ -5008,7 +5734,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 +5744,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 +5767,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 +5782,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 +5792,7 @@ function RichTextEditor(props) {
                     children: "B"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5076,7 +5802,7 @@ function RichTextEditor(props) {
                     children: "I"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5086,7 +5812,7 @@ function RichTextEditor(props) {
                     children: "U"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5096,7 +5822,7 @@ function RichTextEditor(props) {
                     children: "UL"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5106,7 +5832,7 @@ function RichTextEditor(props) {
                     children: "1."
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5116,7 +5842,7 @@ function RichTextEditor(props) {
                     children: "L"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5126,7 +5852,7 @@ function RichTextEditor(props) {
                     children: "C"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5136,7 +5862,7 @@ function RichTextEditor(props) {
                     children: "R"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5154,7 +5880,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 +5890,7 @@ function RichTextEditor(props) {
                     children: "Link"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5182,7 +5908,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 +5918,7 @@ function RichTextEditor(props) {
                     children: "Image"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5210,7 +5936,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 +5946,7 @@ function RichTextEditor(props) {
                     children: "Undo"
                   }
                 ),
-                /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3(
                   "button",
                   {
                     type: "button",
@@ -5234,12 +5960,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 +5975,7 @@ function RichTextEditor(props) {
                   onPointerUp: handleImagePreviewPointerUp,
                   onPointerCancel: handleImagePreviewPointerUp,
                   children: [
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "img",
                       {
                         src: imageEditorState.src,
@@ -5260,7 +5986,7 @@ function RichTextEditor(props) {
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "div",
                       {
                         className: "hv-richtext-image-focus-point",
@@ -5275,9 +6001,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 +6012,7 @@ function RichTextEditor(props) {
                         children: "S"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5295,7 +6021,7 @@ function RichTextEditor(props) {
                         children: "M"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5304,7 +6030,7 @@ function RichTextEditor(props) {
                         children: "L"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5316,9 +6042,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 +6053,7 @@ function RichTextEditor(props) {
                         children: "Orig"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5336,7 +6062,7 @@ function RichTextEditor(props) {
                         children: "Wide"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5345,7 +6071,7 @@ function RichTextEditor(props) {
                         children: "1:1"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5357,9 +6083,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 +6094,7 @@ function RichTextEditor(props) {
                         children: "Left"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5377,7 +6103,7 @@ function RichTextEditor(props) {
                         children: "Center"
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         type: "button",
@@ -5389,8 +6115,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 +6159,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 +6172,7 @@ function RichTextEditor(props) {
                   children: "+Row"
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -5456,7 +6182,7 @@ function RichTextEditor(props) {
                   children: "+Col"
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -5466,7 +6192,7 @@ function RichTextEditor(props) {
                   children: "-Row"
                 }
               ),
-              /* @__PURE__ */ jsx2(
+              /* @__PURE__ */ jsx3(
                 "button",
                 {
                   type: "button",
@@ -5480,8 +6206,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 +6217,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 +6234,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 +6259,7 @@ function RichTextEditor(props) {
           "aria-label": props.locale["a11y.editor"]
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         SignatureOverlay,
         {
           surfaceKey: "document:main",
@@ -5541,11 +6267,13 @@ function RichTextEditor(props) {
           placements: props.signatureOverlay.placements,
           annotations: props.signatureOverlay.annotations,
           pendingSignature: props.signatureOverlay.pendingSignature,
+          pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
           pendingAnnotation: props.signatureOverlay.pendingAnnotation,
           activePlacementId: props.signatureOverlay.activePlacementId,
           activeAnnotationId: props.signatureOverlay.activeAnnotationId,
           placeHint: props.signatureOverlay.placeHint,
           annotationHint: props.signatureOverlay.annotationHint,
+          cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
           annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
           signatureAltLabel: props.signatureOverlay.signatureAltLabel,
           signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -5565,7 +6293,8 @@ function RichTextEditor(props) {
           onRemovePlacement: props.signatureOverlay.onRemovePlacement,
           onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
           onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+          onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
         }
       )
     ] }) })
@@ -5574,9 +6303,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 +6889,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 +6943,7 @@ function SpreadsheetEditor(props) {
     props.onThumbs,
     props.mode
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     props.onExportStateChange?.(
       sheets.length > 0 ? {
         sheets,
@@ -6317,12 +7046,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 +7065,7 @@ function SpreadsheetEditor(props) {
         sheet.name
       )) }),
       !readonly && /* @__PURE__ */ jsxs3("div", { className: "hv-sheet-actions", children: [
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -6345,7 +7074,7 @@ function SpreadsheetEditor(props) {
             children: props.locale["documents.sheetAddSheet"]
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -6354,7 +7083,7 @@ function SpreadsheetEditor(props) {
             children: props.locale["documents.sheetAddRow"]
           }
         ),
-        /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx4(
           "button",
           {
             type: "button",
@@ -6370,7 +7099,7 @@ function SpreadsheetEditor(props) {
         toColumnLabel2(activeCell.col),
         activeCell.row + 1
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         "input",
         {
           value: activeCellValue,
@@ -6380,14 +7109,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 +7130,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 +7144,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 +7171,7 @@ function SpreadsheetEditor(props) {
           rowIndex
         )) })
       ] }),
-      /* @__PURE__ */ jsx3(
+      /* @__PURE__ */ jsx4(
         SignatureOverlay,
         {
           surfaceKey: `sheet:${activeSheet.name}`,
@@ -6451,11 +7180,13 @@ function SpreadsheetEditor(props) {
           placements: props.signatureOverlay.placements,
           annotations: props.signatureOverlay.annotations,
           pendingSignature: props.signatureOverlay.pendingSignature,
+          pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
           pendingAnnotation: props.signatureOverlay.pendingAnnotation,
           activePlacementId: props.signatureOverlay.activePlacementId,
           activeAnnotationId: props.signatureOverlay.activeAnnotationId,
           placeHint: props.signatureOverlay.placeHint,
           annotationHint: props.signatureOverlay.annotationHint,
+          cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
           annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
           signatureAltLabel: props.signatureOverlay.signatureAltLabel,
           signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -6475,7 +7206,8 @@ function SpreadsheetEditor(props) {
           onRemovePlacement: props.signatureOverlay.onRemovePlacement,
           onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
           onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+          onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
         }
       )
     ] }) })
@@ -6483,8 +7215,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 +7225,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 +7233,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",
@@ -6513,11 +7245,13 @@ function ImageRenderer(props) {
         placements: props.signatureOverlay.placements,
         annotations: props.signatureOverlay.annotations,
         pendingSignature: props.signatureOverlay.pendingSignature,
+        pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
         pendingAnnotation: props.signatureOverlay.pendingAnnotation,
         activePlacementId: props.signatureOverlay.activePlacementId,
         activeAnnotationId: props.signatureOverlay.activeAnnotationId,
         placeHint: props.signatureOverlay.placeHint,
         annotationHint: props.signatureOverlay.annotationHint,
+        cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
         annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
         signatureAltLabel: props.signatureOverlay.signatureAltLabel,
         signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -6537,7 +7271,8 @@ function ImageRenderer(props) {
         onRemovePlacement: props.signatureOverlay.onRemovePlacement,
         onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
         onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-        onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+        onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+        onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
       }
     )
   ] }) });
@@ -6548,8 +7283,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 +7309,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 +7387,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 +7414,7 @@ function PdfPage({
   signatureOverlay
 }) {
   const canvasRef = useRef3(null);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!doc || !canvasRef.current) return;
     let active = true;
     const render = async () => {
@@ -6716,8 +7451,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}`,
@@ -6726,11 +7461,13 @@ function PdfPage({
             placements: signatureOverlay.placements,
             annotations: signatureOverlay.annotations,
             pendingSignature: signatureOverlay.pendingSignature,
+            pendingSignatureColor: signatureOverlay.pendingSignatureColor,
             pendingAnnotation: signatureOverlay.pendingAnnotation,
             activePlacementId: signatureOverlay.activePlacementId,
             activeAnnotationId: signatureOverlay.activeAnnotationId,
             placeHint: signatureOverlay.placeHint,
             annotationHint: signatureOverlay.annotationHint,
+            cancelPlacementLabel: signatureOverlay.cancelPlacementLabel,
             annotationPlaceholder: signatureOverlay.annotationPlaceholder,
             signatureAltLabel: signatureOverlay.signatureAltLabel,
             signatureAltByLabel: signatureOverlay.signatureAltByLabel,
@@ -6750,7 +7487,8 @@ function PdfPage({
             onRemovePlacement: signatureOverlay.onRemovePlacement,
             onRemoveAnnotation: signatureOverlay.onRemoveAnnotation,
             onSelectPlacement: signatureOverlay.onSelectPlacement,
-            onSelectAnnotation: signatureOverlay.onSelectAnnotation
+            onSelectAnnotation: signatureOverlay.onSelectAnnotation,
+            onCancelPlacementMode: signatureOverlay.onCancelPlacementMode
           }
         )
       ]
@@ -6759,9 +7497,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 +7520,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 +7787,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 +7844,7 @@ function PptxRenderer(props) {
     };
     loadPptx();
   }, [props.arrayBuffer, props.onExportStateChange]);
-  useEffect6(() => {
+  useEffect7(() => {
     const host = viewRef.current;
     if (!host || typeof ResizeObserver === "undefined") {
       return;
@@ -7154,9 +7892,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 +7904,7 @@ function PptxRenderer(props) {
         if (!slide) {
           return null;
         }
-        return /* @__PURE__ */ jsx6(
+        return /* @__PURE__ */ jsx7(
           "div",
           {
             className: "hv-page-container hv-slide-surface",
@@ -7174,7 +7912,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 +7927,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 +7940,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 +7978,7 @@ function PptxRenderer(props) {
                         },
                         element.id
                       )),
-                      /* @__PURE__ */ jsx6(
+                      /* @__PURE__ */ jsx7(
                         SignatureOverlay,
                         {
                           surfaceKey: `slide:${pageNumber}`,
@@ -7249,11 +7987,13 @@ function PptxRenderer(props) {
                           placements: props.signatureOverlay.placements,
                           annotations: props.signatureOverlay.annotations,
                           pendingSignature: props.signatureOverlay.pendingSignature,
+                          pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
                           pendingAnnotation: props.signatureOverlay.pendingAnnotation,
                           activePlacementId: props.signatureOverlay.activePlacementId,
                           activeAnnotationId: props.signatureOverlay.activeAnnotationId,
                           placeHint: props.signatureOverlay.placeHint,
                           annotationHint: props.signatureOverlay.annotationHint,
+                          cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
                           annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
                           signatureAltLabel: props.signatureOverlay.signatureAltLabel,
                           signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -7273,7 +8013,8 @@ function PptxRenderer(props) {
                           onRemovePlacement: props.signatureOverlay.onRemovePlacement,
                           onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
                           onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-                          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+                          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+                          onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
                         }
                       )
                     ]
@@ -7311,13 +8052,13 @@ var defaultLocale = {
   "signatures.title": "Signatures",
   "signatures.empty": "No signatures",
   "signatures.new": "New Signature",
-  "signatures.ready": "Ready to place",
+  "signatures.ready": "Placement mode active",
   "signatures.cancelPlacement": "Cancel placement",
   "signatures.drawTitle": "Draw Signature",
   "signatures.drawHelp": "Sign above using your mouse or finger",
   "signatures.clear": "Clear",
   "signatures.createAndUse": "Create & Use",
-  "signatures.placeHint": "Click on the document surface to place the signature.",
+  "signatures.placeHint": "Move your pointer to preview the signature, click to place it, then drag to reposition. Press Esc to cancel.",
   "signatures.alt": "Signature",
   "signatures.altBy": "Signature by",
   "signatures.noteIndicator": "Note",
@@ -7327,7 +8068,7 @@ var defaultLocale = {
   "signatures.color.blue": "Blue",
   "signatures.color.red": "Red",
   "signatures.color.green": "Green",
-  "annotations.placeHint": "Click on the document surface to place an annotation.",
+  "annotations.placeHint": "Move your pointer to preview the note, click to place it, then drag to reposition. Press Esc to cancel.",
   "annotations.placeholder": "Add instruction or review note...",
   "annotations.title": "Annotation",
   "annotations.linkedTitle": "Signature Note",
@@ -7416,8 +8157,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 +8229,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 +8342,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 +8369,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 +8401,7 @@ function SignaturePanel(props) {
                   color
                 )) })
               ] }),
-              /* @__PURE__ */ jsx7(
+              /* @__PURE__ */ jsx8(
                 "button",
                 {
                   type: "button",
@@ -7670,7 +8412,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 +8431,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 +8474,7 @@ function SignaturePanel(props) {
                             onClearSelection();
                           }
                         },
-                        children: /* @__PURE__ */ jsx7(Trash2, { size: 12 })
+                        children: /* @__PURE__ */ jsx8(Trash2, { size: 12 })
                       }
                     )
                   ]
@@ -7743,7 +8486,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 +8498,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 +8522,7 @@ function SignaturePanel(props) {
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "div",
               {
                 style: {
@@ -7789,7 +8532,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 +8554,7 @@ function SignaturePanel(props) {
                 )
               }
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "p",
               {
                 style: {
@@ -7836,8 +8579,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 +8597,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 +8627,7 @@ function ThumbnailsSidebar(props) {
       behavior: "smooth"
     });
   }, [currentPage, isOpen]);
-  useEffect7(() => {
+  useEffect8(() => {
     const element = listRef.current;
     if (!element) {
       return;
@@ -7946,8 +8689,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 +8706,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 +8726,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 +8745,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 +8783,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 +8804,7 @@ function Toolbar(props) {
           }
         }
       ),
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         "span",
         {
           style: {
@@ -8077,17 +8820,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 +8841,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 +8877,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 +8899,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 +8924,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 +8942,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 +8960,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 +8985,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 +8997,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 +9007,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 +9095,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 +9202,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 +9295,7 @@ function DocumentViewer(props) {
     props.fileUrl,
     requestedFileType
   ]);
-  useEffect8(() => {
+  useEffect9(() => {
     setZoom(1);
     setCurrentPage(1);
     setSelectedSignature(null);
@@ -8570,7 +9313,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 +9371,7 @@ function DocumentViewer(props) {
     showSignatures,
     showThumbnails
   ]);
-  useEffect8(() => {
+  useEffect9(() => {
     const element = mainRef.current;
     if (!element) {
       return;
@@ -8703,12 +9446,17 @@ function DocumentViewer(props) {
   };
   const handleSignatureSelect = (signature) => {
     setSelectedSignature(normalizeSignature(signature));
-    setSelectedSignatureColor("black");
     setIsPlacingAnnotation(false);
     setActivePlacementId(null);
     setActiveAnnotationId(null);
     props.onSign?.(normalizeSignature(signature));
   };
+  const handleCancelPlacementMode = () => {
+    setSelectedSignature(null);
+    setIsPlacingAnnotation(false);
+    setActivePlacementId(null);
+    setActiveAnnotationId(null);
+  };
   const handlePlaceSignature = (placement) => {
     const nextPlacement = normalizeSignaturePlacement({
       id: createPlacementId(),
@@ -8727,8 +9475,7 @@ function DocumentViewer(props) {
     });
     updatePlacements((prev) => [...prev, nextPlacement]);
     setSelectedSignature(null);
-    setSelectedSignatureColor("black");
-    setActivePlacementId(null);
+    setActivePlacementId(nextPlacement.id);
     setActiveAnnotationId(null);
   };
   const handlePlaceAnnotation = (annotation) => {
@@ -8778,11 +9525,13 @@ function DocumentViewer(props) {
     placements,
     annotations,
     pendingSignature: selectedSignature,
+    pendingSignatureColor: selectedSignature ? selectedSignatureColor : void 0,
     pendingAnnotation: isPlacingAnnotation,
     activePlacementId,
     activeAnnotationId,
     placeHint: locale["signatures.placeHint"],
     annotationHint: locale["annotations.placeHint"],
+    cancelPlacementLabel: locale["signatures.cancelPlacement"],
     annotationPlaceholder: locale["annotations.placeholder"],
     signatureAltLabel: locale["signatures.alt"],
     signatureAltByLabel: locale["signatures.altBy"],
@@ -8809,15 +9558,20 @@ function DocumentViewer(props) {
     onSelectPlacement: (id) => {
       setActivePlacementId(id);
       if (id) {
+        setSelectedSignature(null);
+        setIsPlacingAnnotation(false);
         setActiveAnnotationId(null);
       }
     },
     onSelectAnnotation: (id) => {
       setActiveAnnotationId(id);
       if (id) {
+        setSelectedSignature(null);
+        setIsPlacingAnnotation(false);
         setActivePlacementId(null);
       }
-    }
+    },
+    onCancelPlacementMode: handleCancelPlacementMode
   };
   const saveReady = useMemo9(() => {
     if (!resolved) {
@@ -9008,20 +9762,20 @@ function DocumentViewer(props) {
   };
   const renderContent = () => {
     if (error) {
-      return /* @__PURE__ */ jsx10("div", { className: "hv-status-shell", children: /* @__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__ */ jsx10("div", { className: "hv-status-shell", children: /* @__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 +9786,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 +9811,7 @@ function DocumentViewer(props) {
       case "pdf":
         return /* @__PURE__ */ jsxs10(Fragment4, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             PdfRenderer,
             {
               url: resolved.url,
@@ -9073,7 +9827,7 @@ function DocumentViewer(props) {
       case "md":
         return /* @__PURE__ */ jsxs10(Fragment4, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             RichTextEditor,
             {
               mode: effectiveMode,
@@ -9087,7 +9841,7 @@ function DocumentViewer(props) {
       case "xls":
         return /* @__PURE__ */ jsxs10(Fragment4, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             SpreadsheetEditor,
             {
               mode: effectiveMode,
@@ -9100,7 +9854,7 @@ function DocumentViewer(props) {
       case "ppt":
         return /* @__PURE__ */ jsxs10(Fragment4, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             PptxRenderer,
             {
               onExportStateChange: setPptxExportState,
@@ -9116,10 +9870,10 @@ 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__ */ jsx10("div", { className: "hv-status-shell", children: /* @__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
@@ -9127,7 +9881,7 @@ function DocumentViewer(props) {
     }
   };
   return /* @__PURE__ */ jsxs10("div", { className: "hv-root", "data-hv-theme": theme, children: [
-    /* @__PURE__ */ jsx10(
+    /* @__PURE__ */ jsx11(
       Toolbar,
       {
         fileName: resolved?.fileName,
@@ -9175,7 +9929,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 +9937,7 @@ function DocumentViewer(props) {
           children: props.headerComponent
         }
       ),
-      props.footerComponent && /* @__PURE__ */ jsx10(
+      props.footerComponent && /* @__PURE__ */ jsx11(
         "div",
         {
           ref: exportFooterRef,
@@ -9193,7 +9947,7 @@ function DocumentViewer(props) {
       )
     ] }),
     /* @__PURE__ */ jsxs10("div", { className: "hv-shell", children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         ThumbnailsSidebar,
         {
           isOpen: showThumbnails,
@@ -9203,15 +9957,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,