@zerohive/hive-viewer 2.0.2 → 2.0.4

package/dist/index.cjs

@@ -65,15 +65,18 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/DocumentViewer.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/editors/RichTextEditor.tsx
 var import_mammoth = __toESM(require("mammoth"), 1);
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_markdown_it = __toESM(require("markdown-it"), 1);
 
 // src/components/SignatureOverlay.tsx
 var import_lucide_react = require("lucide-react");
+var import_react2 = require("react");
+
+// src/components/RenderableSignatureImage.tsx
 var import_react = require("react");
 
 // src/utils/signature.ts
@@ -155,23 +158,449 @@ function normalizeSignaturePlacement(placement) {
   };
 }
 
-// src/components/SignatureOverlay.tsx
+// 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
 var import_jsx_runtime = require("react/jsx-runtime");
+var RenderableSignatureImage = (0, import_react.memo)(function RenderableSignatureImage2(props) {
+  const { signatureImageUrl, inkColor, ...imageProps } = props;
+  const [resolvedSrc, setResolvedSrc] = (0, import_react.useState)(signatureImageUrl);
+  (0, import_react.useEffect)(() => {
+    let cancelled = false;
+    void getRenderableSignatureImage(signatureImageUrl, inkColor).then((nextSource) => {
+      if (!cancelled) {
+        setResolvedSrc(nextSource);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setResolvedSrc(signatureImageUrl);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [inkColor, signatureImageUrl]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { ...imageProps, src: resolvedSrc, decoding: "async", draggable: false });
+});
+RenderableSignatureImage.displayName = "RenderableSignatureImage";
+
+// src/components/SignatureOverlay.tsx
+var import_jsx_runtime2 = require("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":
@@ -189,9 +618,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,
@@ -202,11 +628,13 @@ function SignatureOverlay(props) {
     placements,
     annotations,
     pendingSignature,
+    pendingSignatureColor,
     pendingAnnotation,
     activePlacementId,
     activeAnnotationId,
     placeHint,
     annotationHint,
+    cancelPlacementLabel,
     annotationPlaceholder,
     signatureAltLabel,
     signatureAltByLabel,
@@ -226,24 +654,134 @@ function SignatureOverlay(props) {
     onRemovePlacement,
     onRemoveAnnotation,
     onSelectPlacement,
-    onSelectAnnotation
+    onSelectAnnotation,
+    onCancelPlacementMode
   } = props;
-  const layerRef = (0, import_react.useRef)(null);
-  const [dragState, setDragState] = (0, import_react.useState)(null);
-  const visiblePlacements = (0, import_react.useMemo)(
+  const layerRef = (0, import_react2.useRef)(null);
+  const [dragState, setDragState] = (0, import_react2.useState)(null);
+  const [dragPreview, setDragPreview] = (0, import_react2.useState)(null);
+  const [placementPreview, setPlacementPreview] = (0, import_react2.useState)(
+    null
+  );
+  const [pendingSignatureAspectRatio, setPendingSignatureAspectRatio] = (0, import_react2.useState)(
+    DEFAULT_SIGNATURE_ASPECT_RATIO
+  );
+  const [surfaceAspectRatio, setSurfaceAspectRatio] = (0, import_react2.useState)(
+    () => getDefaultSurfaceAspectRatio(surfaceKind)
+  );
+  const visiblePlacements = (0, import_react2.useMemo)(
     () => placements.filter((placement) => placement.surfaceKey === surfaceKey),
     [placements, surfaceKey]
   );
-  const visibleAnnotations = (0, import_react.useMemo)(
+  const visibleAnnotations = (0, import_react2.useMemo)(
     () => annotations.filter((annotation) => annotation.surfaceKey === surfaceKey),
     [annotations, surfaceKey]
   );
-  const linkedAnnotationIds = (0, import_react.useMemo)(
+  const linkedAnnotationIds = (0, import_react2.useMemo)(
     () => getLinkedAnnotationIds(visibleAnnotations),
     [visibleAnnotations]
   );
   const captureMode = pendingSignature ? "signature" : pendingAnnotation ? "annotation" : null;
-  (0, import_react.useEffect)(() => {
+  const defaultSignatureSize = (0, import_react2.useMemo)(
+    () => getDefaultPlacementSize(
+      surfaceKind,
+      pendingSignatureAspectRatio,
+      surfaceAspectRatio
+    ),
+    [pendingSignatureAspectRatio, surfaceAspectRatio, surfaceKind]
+  );
+  const defaultAnnotationSize = (0, import_react2.useMemo)(
+    () => getDefaultAnnotationSize(surfaceKind),
+    [surfaceKind]
+  );
+  const previewGeometry = (0, import_react2.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
+  ]);
+  (0, import_react2.useEffect)(() => {
+    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]);
+  (0, import_react2.useEffect)(() => {
+    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]);
+  (0, import_react2.useEffect)(() => {
+    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]);
+  (0, import_react2.useEffect)(() => {
+    if (!dragState) {
+      setDragPreview(null);
+    }
+  }, [dragState]);
+  (0, import_react2.useEffect)(() => {
     if (captureMode || dragState) {
       return;
     }
@@ -262,7 +800,7 @@ function SignatureOverlay(props) {
       window.removeEventListener("pointerdown", handlePointerDown, true);
     };
   }, [captureMode, dragState, onSelectAnnotation, onSelectPlacement]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!dragState) {
       return;
     }
@@ -281,11 +819,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") {
@@ -299,7 +838,9 @@ function SignatureOverlay(props) {
           0.035,
           1 - dragState.originY
         );
-        onUpdatePlacement(dragState.id, {
+        setDragPreview({
+          x: dragState.originX,
+          y: dragState.originY,
           width: nextWidth2,
           height: nextHeight2
         });
@@ -315,12 +856,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);
@@ -329,7 +880,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;
@@ -338,7 +889,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,
@@ -354,7 +905,7 @@ function SignatureOverlay(props) {
       return;
     }
     if (captureMode === "annotation") {
-      const { width, height } = getDefaultAnnotationSize(surfaceKind);
+      const { width, height } = defaultAnnotationSize;
       onPlaceAnnotation({
         surfaceKey,
         surfaceKind,
@@ -369,6 +920,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;
@@ -378,6 +939,7 @@ function SignatureOverlay(props) {
     if (target.kind === "signature") {
       onSelectPlacement(target.item.id);
       onSelectAnnotation(null);
+      setDragPreview(null);
       setDragState({
         id: target.item.id,
         targetType: "signature",
@@ -395,6 +957,7 @@ function SignatureOverlay(props) {
     }
     onSelectAnnotation(target.item.id);
     onSelectPlacement(null);
+    setDragPreview(null);
     setDragState({
       id: target.item.id,
       targetType: "annotation",
@@ -408,42 +971,134 @@ function SignatureOverlay(props) {
       rect: layerRef.current.getBoundingClientRect()
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: layerRef, className: "hv-signature-overlay", children: [
-    captureMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-signature-overlay-capture", onClick: handlePlace, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-signature-overlay-hint", children: captureMode === "annotation" ? annotationHint : placeHint }) }),
+  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__ */ (0, import_jsx_runtime2.jsxs)("div", { ref: layerRef, className: "hv-signature-overlay", children: [
+    captureMode && /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              className: "hv-signature-overlay-banner",
+              onPointerDown: (event) => {
+                event.stopPropagation();
+              },
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-signature-overlay-banner-copy", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { className: "hv-signature-overlay-title", children: captureMode === "annotation" ? annotationTitle : signatureAltLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-overlay-hint", children: captureMode === "annotation" ? annotationHint : placeHint })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "hv-signature-overlay-cancel",
+                    onPointerDown: (event) => {
+                      event.stopPropagation();
+                    },
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      onCancelPlacementMode();
+                    },
+                    children: cancelPlacementLabel
+                  }
+                )
+              ]
+            }
+          ),
+          captureMode === "signature" && previewGeometry && pendingSignature && /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-signature-image-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  RenderableSignatureImage,
+                  {
+                    signatureImageUrl: pendingSignature.signatureImageUrl,
+                    inkColor: pendingSignatureColor,
+                    alt: signatureAltLabel,
+                    className: "hv-signature-image"
+                  }
+                ) }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-signature-meta", children: [
+                  pendingSignature.signedBy?.trim() && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-meta-name", children: pendingSignature.signedBy.trim() }),
+                  pendingSignature.jobTitle?.trim() && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-meta-jobtitle", children: pendingSignature.jobTitle.trim() }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-meta-date", children: normalizeSignatureDate(pendingSignature.dateSigned) })
+                ] })
+              ]
+            }
+          ),
+          captureMode === "annotation" && previewGeometry && /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-annotation-header", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-annotation-header-copy", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-annotation-title", children: annotationTitle }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-annotation-body", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.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__ */ (0, import_jsx_runtime.jsx)(
+            isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "button",
               {
                 type: "button",
@@ -459,26 +1114,22 @@ function SignatureOverlay(props) {
                 children: "x"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-signature-image-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "div",
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-signature-image-wrap", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              RenderableSignatureImage,
               {
-                role: "img",
-                "aria-label": signer ? `${signatureAltByLabel} ${signer}` : signatureAltLabel,
-                className: "hv-signature-image hv-signature-ink",
-                style: {
-                  backgroundColor: SIGNATURE_INK_COLOR_VALUES[signatureColor],
-                  maskImage,
-                  WebkitMaskImage: maskImage
-                }
+                signatureImageUrl: placement.signature.signatureImageUrl,
+                inkColor: signatureColor,
+                alt: signer ? `${signatureAltByLabel} ${signer}` : signatureAltLabel,
+                className: "hv-signature-image"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hv-signature-meta", children: [
-              signer && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-signature-meta-name", children: signer }),
-              jobTitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-signature-meta-jobtitle", children: jobTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-signature-meta-date", children: signedDate })
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-signature-meta", children: [
+              signer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-meta-name", children: signer }),
+              jobTitle && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-meta-jobtitle", children: jobTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-meta-date", children: signedDate })
             ] }),
-            hasLinkedAnnotation && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-signature-note-indicator", children: signatureNoteIndicatorLabel }),
-            isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            hasLinkedAnnotation && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-signature-note-indicator", children: signatureNoteIndicatorLabel }),
+            isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "div",
               {
                 className: "hv-signature-color-toolbar",
@@ -489,8 +1140,8 @@ function SignatureOverlay(props) {
                   event.stopPropagation();
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-signature-color-toolbar-label", children: signatureColorLabel }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-signature-color-toolbar-label", children: signatureColorLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "button",
                     {
                       type: "button",
@@ -505,7 +1156,7 @@ function SignatureOverlay(props) {
                 ]
               }
             ),
-            isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 className: "hv-signature-resize",
@@ -522,18 +1173,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__ */ (0, import_jsx_runtime.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "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,
@@ -542,20 +1194,20 @@ function SignatureOverlay(props) {
               onSelectAnnotation(annotation.id);
               onSelectPlacement(null);
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.MessageSquare, { size: 14 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.MessageSquare, { size: 14 })
           },
           annotation.id
         );
       }
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
           className: `hv-annotation-card ${isActive ? "active" : ""} ${isLinked ? "linked" : ""}`,
           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();
@@ -563,7 +1215,7 @@ function SignatureOverlay(props) {
             onSelectPlacement(null);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
               "div",
               {
                 className: "hv-annotation-header",
@@ -581,11 +1233,11 @@ function SignatureOverlay(props) {
                   );
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "hv-annotation-header-copy", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-annotation-title", children: isLinked ? linkedAnnotationTitle : annotationTitle }),
-                    isLinked && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "hv-annotation-badge", children: linkedAnnotationBadge })
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-annotation-header-copy", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-annotation-title", children: isLinked ? linkedAnnotationTitle : annotationTitle }),
+                    isLinked && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-annotation-badge", children: linkedAnnotationBadge })
                   ] }),
-                  isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "button",
                     {
                       type: "button",
@@ -604,7 +1256,7 @@ function SignatureOverlay(props) {
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "hv-annotation-body", children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-annotation-body", children: isActive ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "textarea",
               {
                 value: annotation.text,
@@ -618,14 +1270,14 @@ function SignatureOverlay(props) {
                   event.stopPropagation();
                 }
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 className: `hv-annotation-preview ${hasText ? "" : "empty"}`,
                 children: hasText ? annotation.text : annotationPlaceholder
               }
             ) }),
-            isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            isActive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 className: "hv-annotation-resize",
@@ -1460,7 +2112,7 @@ function ensureImageSource(source) {
   }
   return `data:image/png;base64,${trimmedSource}`;
 }
-function createCanvas(width, height) {
+function createCanvas2(width, height) {
   const canvas = document.createElement("canvas");
   canvas.width = Math.max(1, Math.round(width));
   canvas.height = Math.max(1, Math.round(height));
@@ -1501,7 +2153,7 @@ async function tryLoadImage(source) {
   }
 }
 function getOpaqueImageBounds(image, alphaThreshold = 8) {
-  const canvas = createCanvas(image.width, image.height);
+  const canvas = createCanvas2(image.width, image.height);
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     return {
@@ -1852,7 +2504,7 @@ async function renderDecorationCanvasFromModel(model, kind) {
   }
   const canvasWidth = 1600;
   const canvasHeight = kind === "header" ? 146 : 88;
-  const canvas = createCanvas(canvasWidth, canvasHeight);
+  const canvas = createCanvas2(canvasWidth, canvasHeight);
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     return null;
@@ -2052,7 +2704,7 @@ function applyPageDecorationsToCanvas(baseCanvas, decorations) {
   if (!decorations?.headerCanvas && !decorations?.footerCanvas) {
     return baseCanvas;
   }
-  const pageCanvas = createCanvas(baseCanvas.width, baseCanvas.height);
+  const pageCanvas = createCanvas2(baseCanvas.width, baseCanvas.height);
   const ctx = pageCanvas.getContext("2d");
   if (!ctx) {
     return baseCanvas;
@@ -2099,19 +2751,6 @@ function applyPageDecorationsToCanvas(baseCanvas, decorations) {
 function formatSignedDate(value) {
   return normalizeSignatureDate(value);
 }
-function createTintedImageCanvas(image, signatureColor) {
-  const tintedCanvas = createCanvas(image.width, image.height);
-  const tintedCtx = tintedCanvas.getContext("2d");
-  if (!tintedCtx) {
-    return null;
-  }
-  tintedCtx.drawImage(image, 0, 0);
-  tintedCtx.globalCompositeOperation = "source-in";
-  tintedCtx.fillStyle = signatureColor;
-  tintedCtx.fillRect(0, 0, tintedCanvas.width, tintedCanvas.height);
-  tintedCtx.globalCompositeOperation = "source-over";
-  return tintedCanvas;
-}
 async function drawSignatureStamp(ctx, placement, x, y, width, height, options) {
   const isSlideStamp = placement.surfaceKind === "slide";
   const borderless = options?.borderless ?? false;
@@ -2121,12 +2760,12 @@ async function drawSignatureStamp(ctx, placement, x, y, width, height, options)
     isSlideStamp ? 46 : 40,
     height * (isSlideStamp ? 0.36 : 0.32)
   );
-  const signatureImage = await loadImage(placement.signature.signatureImageUrl);
   const signatureColor = normalizeSignatureInkColor(placement.signatureColor);
-  const tintedSignatureImage = createTintedImageCanvas(
-    signatureImage,
-    SIGNATURE_INK_COLOR_VALUES[signatureColor]
+  const renderableSignatureImage = await getRenderableSignatureImage(
+    placement.signature.signatureImageUrl,
+    signatureColor
   );
+  const signatureImage = await loadImage(renderableSignatureImage);
   const imageBounds = getOpaqueImageBounds(signatureImage);
   const signer = placement.signature.signedBy?.trim() || "";
   const jobTitle = placement.signature.jobTitle?.trim() || "";
@@ -2157,7 +2796,7 @@ async function drawSignatureStamp(ctx, placement, x, y, width, height, options)
   const imageBaseY = isSlideStamp ? y : y + padding;
   const imageY = imageBaseY + Math.max(imageAreaHeight - imageHeight, 0) * (isSlideStamp ? 0.7 : 0.18);
   ctx.drawImage(
-    tintedSignatureImage || signatureImage,
+    signatureImage,
     imageBounds.sx,
     imageBounds.sy,
     imageBounds.sw,
@@ -2355,7 +2994,7 @@ async function createSignatureStampDataUrl(placement, width, height) {
   const aspectRatio = placement.width > 0 && placement.height > 0 ? placement.width / placement.height : 3.1;
   const targetHeight = height ?? (placement.surfaceKind === "slide" ? 320 : 260);
   const targetWidth = width ?? Math.max(480, Math.round(targetHeight * aspectRatio));
-  const canvas = createCanvas(targetWidth, targetHeight);
+  const canvas = createCanvas2(targetWidth, targetHeight);
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     throw new Error("Unable to render the signature stamp.");
@@ -2364,7 +3003,7 @@ async function createSignatureStampDataUrl(placement, width, height) {
   return canvas.toDataURL("image/png");
 }
 async function createAnnotationCardDataUrl(annotation, width = 720, height = 360, labels = defaultExportLocaleLabels) {
-  const canvas = createCanvas(width, height);
+  const canvas = createCanvas2(width, height);
   const ctx = canvas.getContext("2d");
   if (!ctx) {
     throw new Error("Unable to render the annotation.");
@@ -2689,7 +3328,7 @@ function splitTallCanvas(canvas) {
   }
   for (let offset = 0; offset < canvas.height; offset += maxSliceHeight) {
     const sliceHeight = Math.min(maxSliceHeight, canvas.height - offset);
-    const sliceCanvas = createCanvas(canvas.width, sliceHeight);
+    const sliceCanvas = createCanvas2(canvas.width, sliceHeight);
     const ctx = sliceCanvas.getContext("2d");
     if (!ctx) {
       continue;
@@ -2824,7 +3463,7 @@ async function renderSlidesToCanvases(exportState, placements, annotations, labe
   const scale = targetWidth / slideWidth;
   const canvases = [];
   for (const [index, slide] of exportState.slides.entries()) {
-    const canvas = createCanvas(slideWidth * scale, slideHeight * scale);
+    const canvas = createCanvas2(slideWidth * scale, slideHeight * scale);
     const ctx = canvas.getContext("2d");
     if (!ctx) {
       continue;
@@ -2942,7 +3581,7 @@ async function renderSlidesToCanvases(exportState, placements, annotations, labe
     );
     canvases.push(canvas);
   }
-  return canvases.length > 0 ? canvases : [createCanvas(1280, 720)];
+  return canvases.length > 0 ? canvases : [createCanvas2(1280, 720)];
 }
 function createSheetMergeLookup(merges) {
   const starts = /* @__PURE__ */ new Map();
@@ -3108,7 +3747,7 @@ async function renderSheetsToCanvases(sheets, placements, annotations, labels =
     const visibleRowHeights = sheet.rowHeights.slice(0, sheet.renderedRowCount);
     const totalWidth = SHEET_ROW_HEADER_WIDTH + visibleColWidths.reduce((sum, value) => sum + value, 0);
     const totalHeight = SHEET_COLUMN_HEADER_HEIGHT + visibleRowHeights.reduce((sum, value) => sum + value, 0);
-    const canvas = createCanvas(totalWidth, totalHeight);
+    const canvas = createCanvas2(totalWidth, totalHeight);
     const ctx = canvas.getContext("2d");
     if (!ctx) {
       continue;
@@ -3233,7 +3872,7 @@ async function exportSignedPdfDocument(args) {
   for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber += 1) {
     const page = await pdf.getPage(pageNumber);
     const viewport = page.getViewport({ scale: 2 });
-    const canvas = createCanvas(viewport.width, viewport.height);
+    const canvas = createCanvas2(viewport.width, viewport.height);
     const ctx = canvas.getContext("2d");
     if (!ctx) {
       continue;
@@ -3285,7 +3924,7 @@ async function exportSignedImageFile(args) {
   const objectUrl = URL.createObjectURL(imageBlob);
   try {
     const image = await loadImage(objectUrl);
-    const canvas = createCanvas(image.width, image.height);
+    const canvas = createCanvas2(image.width, image.height);
     const ctx = canvas.getContext("2d");
     if (!ctx) {
       throw new Error("Unable to render the image document.");
@@ -3329,7 +3968,7 @@ async function exportSignedRichTextFile(args) {
     const canvases = [];
     for (const page of args.pages) {
       const image = await loadImage(page.imageUrl);
-      const canvas2 = createCanvas(page.width, page.height);
+      const canvas2 = createCanvas2(page.width, page.height);
       const ctx2 = canvas2.getContext("2d");
       if (!ctx2) {
         continue;
@@ -3686,13 +4325,13 @@ function sanitizeHtml(html) {
 }
 
 // src/editors/RichTextEditor.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var DOC_PAGE_WIDTH = 816;
 var DOC_PAGE_HEIGHT = 1056;
 var PAGE_RENDER_SCALE = 2;
 var PAGE_BREAK_MIN_FILL = 0.55;
 var DOCX_PREVIEW_CLASS_NAME = "hv-docx-page";
-function createCanvas2(width, height) {
+function createCanvas3(width, height) {
   const canvas = document.createElement("canvas");
   canvas.width = Math.max(1, Math.round(width));
   canvas.height = Math.max(1, Math.round(height));
@@ -3777,7 +4416,7 @@ function calculatePageBreakOffsets(container, pageHeight) {
 function createThumbnailDataUrl(canvas) {
   const thumbWidth = 160;
   const thumbScale = thumbWidth / canvas.width;
-  const thumbCanvas = createCanvas2(thumbWidth, canvas.height * thumbScale);
+  const thumbCanvas = createCanvas3(thumbWidth, canvas.height * thumbScale);
   const thumbCtx = thumbCanvas.getContext("2d");
   if (thumbCtx) {
     thumbCtx.fillStyle = "#ffffff";
@@ -3795,7 +4434,7 @@ function buildPageModels(sourceCanvas, breakOffsets) {
   for (const [index, endOffset] of breakOffsets.entries()) {
     const sourceY = previousOffset * scale;
     const sourceHeight = Math.max((endOffset - previousOffset) * scale, 1);
-    const pageCanvas = createCanvas2(pageCanvasWidth, pageCanvasHeight);
+    const pageCanvas = createCanvas3(pageCanvasWidth, pageCanvasHeight);
     const pageCtx = pageCanvas.getContext("2d");
     if (!pageCtx) {
       previousOffset = endOffset;
@@ -3825,7 +4464,7 @@ function buildPageModels(sourceCanvas, breakOffsets) {
     previousOffset = endOffset;
   }
   if (pages.length === 0) {
-    const blankCanvas = createCanvas2(
+    const blankCanvas = createCanvas3(
       DOC_PAGE_WIDTH * PAGE_RENDER_SCALE,
       DOC_PAGE_HEIGHT * PAGE_RENDER_SCALE
     );
@@ -4175,36 +4814,38 @@ function RichTextEditor(props) {
     media: false,
     history: false
   });
-  const editorRef = (0, import_react2.useRef)(null);
-  const measureRef = (0, import_react2.useRef)(null);
-  const docxPreviewRef = (0, import_react2.useRef)(null);
-  const imageInputRef = (0, import_react2.useRef)(null);
-  const imagePreviewRef = (0, import_react2.useRef)(null);
-  const savedSelectionRef = (0, import_react2.useRef)(null);
-  const imageDragPointerIdRef = (0, import_react2.useRef)(null);
-  const [contentHtml, setContentHtml] = (0, import_react2.useState)("");
-  const [editableContentHtml, setEditableContentHtml] = (0, import_react2.useState)("");
-  const [selectedTemplateId, setSelectedTemplateId] = (0, import_react2.useState)("blank");
-  const [areTemplatesVisible, setAreTemplatesVisible] = (0, import_react2.useState)(true);
-  const [isCompactToolbar, setIsCompactToolbar] = (0, import_react2.useState)(false);
-  const [expandedToolbarSections, setExpandedToolbarSections] = (0, import_react2.useState)(
+  const editorRef = (0, import_react3.useRef)(null);
+  const measureRef = (0, import_react3.useRef)(null);
+  const docxPreviewRef = (0, import_react3.useRef)(null);
+  const imageInputRef = (0, import_react3.useRef)(null);
+  const imagePreviewRef = (0, import_react3.useRef)(null);
+  const savedSelectionRef = (0, import_react3.useRef)(null);
+  const imageDragPointerIdRef = (0, import_react3.useRef)(null);
+  const [contentHtml, setContentHtml] = (0, import_react3.useState)("");
+  const [editableContentHtml, setEditableContentHtml] = (0, import_react3.useState)("");
+  const [selectedTemplateId, setSelectedTemplateId] = (0, import_react3.useState)("blank");
+  const [areTemplatesVisible, setAreTemplatesVisible] = (0, import_react3.useState)(true);
+  const [isCompactToolbar, setIsCompactToolbar] = (0, import_react3.useState)(false);
+  const [expandedToolbarSections, setExpandedToolbarSections] = (0, import_react3.useState)(
     createCompactToolbarState
   );
-  const [imageEditorState, setImageEditorState] = (0, import_react2.useState)(null);
-  const [toolbarState, setToolbarState] = (0, import_react2.useState)(
+  const [imageEditorState, setImageEditorState] = (0, import_react3.useState)(null);
+  const [toolbarState, setToolbarState] = (0, import_react3.useState)(
     createDefaultToolbarState()
   );
-  const [loading, setLoading] = (0, import_react2.useState)(false);
-  const [isPaginating, setIsPaginating] = (0, import_react2.useState)(false);
-  const [pages, setPages] = (0, import_react2.useState)([]);
-  const [docxPages, setDocxPages] = (0, import_react2.useState)([]);
-  const [isRenderingDocxPreview, setIsRenderingDocxPreview] = (0, import_react2.useState)(false);
-  const [docxPreviewFailed, setDocxPreviewFailed] = (0, import_react2.useState)(false);
-  const mdParser = (0, import_react2.useRef)(new import_markdown_it.default({ html: true, linkify: true }));
-  const authoringTemplates = (0, import_react2.useMemo)(() => createAuthoringTemplates(), []);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [isPaginating, setIsPaginating] = (0, import_react3.useState)(false);
+  const [pages, setPages] = (0, import_react3.useState)([]);
+  const [docxPages, setDocxPages] = (0, import_react3.useState)([]);
+  const [isRenderingDocxPreview, setIsRenderingDocxPreview] = (0, import_react3.useState)(false);
+  const [docxPreviewFailed, setDocxPreviewFailed] = (0, import_react3.useState)(false);
+  const mdParser = (0, import_react3.useRef)(new import_markdown_it.default({ html: true, linkify: true }));
+  const authoringTemplates = (0, import_react3.useMemo)(() => createAuthoringTemplates(), []);
   const isAuthoringMode = props.mode === "edit" || props.mode === "create";
+  const isPlainTextFile = props.fileName.toLowerCase().endsWith(".txt") || props.fileType === "txt";
   const isDocxFile = props.fileName.toLowerCase().endsWith(".docx") || props.fileType === "docx";
   const useDocxPreviewView = props.mode === "view" && isDocxFile && Boolean(props.arrayBuffer);
+  const useContinuousPlainTextView = props.mode === "view" && isPlainTextFile;
   const syncTemplateSelection = (nextHtml) => {
     const matchedTemplate = authoringTemplates.find(
       (template) => template.html === nextHtml
@@ -4248,7 +4889,7 @@ function RichTextEditor(props) {
     }
     setToolbarState(readToolbarState(editorRef.current, savedSelectionRef.current));
   };
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const loadDoc = async () => {
       if (!props.arrayBuffer) {
         const templateHtml = props.mode === "create" ? authoringTemplates[0]?.html ?? "" : "";
@@ -4309,7 +4950,7 @@ function RichTextEditor(props) {
     props.locale,
     props.mode
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!isAuthoringMode || !editorRef.current) {
       return;
     }
@@ -4318,7 +4959,7 @@ function RichTextEditor(props) {
     }
     refreshToolbarState();
   }, [editableContentHtml, isAuthoringMode]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!isAuthoringMode || typeof document === "undefined") {
       return;
     }
@@ -4338,12 +4979,12 @@ function RichTextEditor(props) {
       document.removeEventListener("selectionchange", handleSelectionChange);
     };
   }, [isAuthoringMode]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (props.mode === "create") {
       setAreTemplatesVisible(true);
     }
   }, [props.mode, props.fileName]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (typeof window === "undefined") {
       return;
     }
@@ -4360,7 +5001,7 @@ function RichTextEditor(props) {
       mediaQuery.removeEventListener("change", syncCompactState);
     };
   }, []);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (toolbarState.hasSelectedImage && toolbarState.imageSrc) {
       setImageEditorState({
         src: toolbarState.imageSrc,
@@ -4382,7 +5023,7 @@ function RichTextEditor(props) {
     toolbarState.imageScale,
     toolbarState.imageSrc
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (!useDocxPreviewView || !docxPreviewRef.current || !props.arrayBuffer) {
       setDocxPages([]);
       setDocxPreviewFailed(false);
@@ -4481,13 +5122,23 @@ function RichTextEditor(props) {
     props.onThumbs,
     useDocxPreviewView
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (props.mode !== "view") {
       setPages([]);
       props.onPageCount(1);
       props.onThumbs([]);
       return;
     }
+    if (useContinuousPlainTextView) {
+      setPages([]);
+      setIsPaginating(false);
+      props.onPageCount(1);
+      props.onThumbs([]);
+      if (props.currentPage !== 1) {
+        props.onCurrentPageChange(1);
+      }
+      return;
+    }
     if (useDocxPreviewView && !docxPreviewFailed) {
       setPages([]);
       return;
@@ -4556,17 +5207,26 @@ function RichTextEditor(props) {
   }, [
     contentHtml,
     docxPreviewFailed,
+    props.currentPage,
     props.mode,
     props.onCurrentPageChange,
     props.onPageCount,
     props.onThumbs,
+    useContinuousPlainTextView,
     useDocxPreviewView
   ]);
-  const activeViewPages = (0, import_react2.useMemo)(
-    () => props.mode === "view" ? useDocxPreviewView && !docxPreviewFailed ? docxPages : pages : void 0,
-    [docxPages, docxPreviewFailed, pages, props.mode, useDocxPreviewView]
+  const activeViewPages = (0, import_react3.useMemo)(
+    () => props.mode === "view" ? useDocxPreviewView && !docxPreviewFailed ? docxPages : useContinuousPlainTextView ? void 0 : pages : void 0,
+    [
+      docxPages,
+      docxPreviewFailed,
+      pages,
+      props.mode,
+      useContinuousPlainTextView,
+      useDocxPreviewView
+    ]
   );
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const container = props.mode === "view" ? useDocxPreviewView && !docxPreviewFailed ? docxPreviewRef.current : measureRef.current : editorRef.current;
     props.onExportStateChange?.({
       container,
@@ -4582,12 +5242,12 @@ function RichTextEditor(props) {
     props.onExportStateChange,
     useDocxPreviewView
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     return () => {
       props.onExportStateChange?.(null);
     };
   }, [props.onExportStateChange]);
-  const pagesToShow = (0, import_react2.useMemo)(
+  const pagesToShow = (0, import_react3.useMemo)(
     () => getPagesToShow(
       useDocxPreviewView && !docxPreviewFailed ? docxPages.length : pages.length,
       props.currentPage,
@@ -4888,10 +5548,10 @@ function RichTextEditor(props) {
   };
   const renderToolbarSectionHeader = (section, label) => {
     if (!isCompactToolbar) {
-      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-label", children: label });
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-label", children: label });
     }
     const isOpen = isToolbarSectionOpen(section);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "button",
       {
         type: "button",
@@ -4899,8 +5559,8 @@ function RichTextEditor(props) {
         "aria-expanded": isOpen,
         onClick: () => toggleToolbarSection(section),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-label", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-toggle-copy", children: isOpen ? props.locale["documents.richText.toolbar.collapseSection"] : props.locale["documents.richText.toolbar.expandSection"] })
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-toggle-copy", children: isOpen ? props.locale["documents.richText.toolbar.collapseSection"] : props.locale["documents.richText.toolbar.expandSection"] })
         ]
       }
     );
@@ -4920,8 +5580,8 @@ function RichTextEditor(props) {
     });
   };
   if (props.mode === "view" && useDocxPreviewView && !docxPreviewFailed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-docx-preview-shell", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-docx-preview-shell", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           ref: docxPreviewRef,
@@ -4929,21 +5589,21 @@ function RichTextEditor(props) {
           "aria-label": "DOCX document pages"
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           className: props.layout === "side-by-side" ? "hv-view-double" : "hv-view-single",
-          children: loading || isRenderingDocxPreview ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
+          children: loading || isRenderingDocxPreview ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
             const page = docxPages[pageNumber - 1];
             if (!page) {
               return null;
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
                 className: "hv-page-container hv-docx-page-surface",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "img",
                     {
                       src: page.imageUrl,
@@ -4951,7 +5611,7 @@ function RichTextEditor(props) {
                       className: "hv-docx-page-image"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     SignatureOverlay,
                     {
                       surfaceKey: page.surfaceKey,
@@ -4960,11 +5620,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,
@@ -4984,7 +5646,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
                     }
                   )
                 ]
@@ -4996,9 +5659,69 @@ function RichTextEditor(props) {
       )
     ] });
   }
+  if (props.mode === "view" && useContinuousPlainTextView) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-docx-measure-shell", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "div",
+        {
+          ref: measureRef,
+          className: "hv-docx-content hv-docx-measure-content hv-text-scroll-content",
+          dangerouslySetInnerHTML: { __html: contentHtml }
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-view-single", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-page-container hv-text-scroll-surface", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-page-container hv-text-scroll-surface", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "div",
+          {
+            className: "hv-docx-content hv-text-scroll-content",
+            dangerouslySetInnerHTML: { __html: contentHtml }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          SignatureOverlay,
+          {
+            surfaceKey: "document:main",
+            surfaceKind: "document",
+            page: 1,
+            placements: props.signatureOverlay.placements,
+            annotations: props.signatureOverlay.annotations,
+            pendingSignature: props.signatureOverlay.pendingSignature,
+            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__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-docx-measure-shell", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-docx-measure-shell", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           ref: measureRef,
@@ -5006,21 +5729,21 @@ function RichTextEditor(props) {
           dangerouslySetInnerHTML: { __html: contentHtml }
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           className: props.layout === "side-by-side" ? "hv-view-double" : "hv-view-single",
-          children: loading || isPaginating ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
+          children: loading || isPaginating ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.renderingPages"] }) }) : pagesToShow.map((pageNumber) => {
             const page = pages[pageNumber - 1];
             if (!page) {
               return null;
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "div",
               {
                 className: "hv-page-container hv-docx-page-surface",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "img",
                     {
                       src: page.imageUrl,
@@ -5028,7 +5751,7 @@ function RichTextEditor(props) {
                       className: "hv-docx-page-image"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     SignatureOverlay,
                     {
                       surfaceKey: page.surfaceKey,
@@ -5037,11 +5760,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,
@@ -5061,7 +5786,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
                     }
                   )
                 ]
@@ -5073,8 +5799,8 @@ function RichTextEditor(props) {
       )
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-view-single hv-richtext-authoring-shell", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-view-single hv-richtext-authoring-shell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "input",
       {
         ref: imageInputRef,
@@ -5084,20 +5810,20 @@ function RichTextEditor(props) {
         onChange: handleInsertImage
       }
     ),
-    isAuthoringMode && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-richtext-authoring-top", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    isAuthoringMode && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-richtext-authoring-top", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
       "div",
       {
         className: "hv-richtext-toolbar",
         role: "toolbar",
         "aria-label": props.locale["a11y.ribbon"],
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-row", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
               renderToolbarSectionHeader(
                 "style",
                 props.locale["documents.richText.toolbar.styleLabel"]
               ),
-              isToolbarSectionOpen("style") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+              isToolbarSectionOpen("style") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "select",
                 {
                   className: "hv-richtext-select",
@@ -5107,22 +5833,22 @@ function RichTextEditor(props) {
                     event.target.value === "blockquote" ? "BLOCKQUOTE" : event.target.value.toUpperCase()
                   ),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "p", children: props.locale["documents.richText.toolbar.paragraph"] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "h1", children: props.locale["documents.richText.toolbar.heading1"] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "h2", children: props.locale["documents.richText.toolbar.heading2"] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "h3", children: props.locale["documents.richText.toolbar.heading3"] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: "blockquote", children: props.locale["documents.richText.toolbar.quote"] })
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "p", children: props.locale["documents.richText.toolbar.paragraph"] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "h1", children: props.locale["documents.richText.toolbar.heading1"] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "h2", children: props.locale["documents.richText.toolbar.heading2"] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "h3", children: props.locale["documents.richText.toolbar.heading3"] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "blockquote", children: props.locale["documents.richText.toolbar.quote"] })
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
               renderToolbarSectionHeader(
                 "format",
                 props.locale["documents.richText.toolbar.formatLabel"]
               ),
-              isToolbarSectionOpen("format") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              isToolbarSectionOpen("format") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5132,7 +5858,7 @@ function RichTextEditor(props) {
                     children: "B"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5142,7 +5868,7 @@ function RichTextEditor(props) {
                     children: "I"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5152,7 +5878,7 @@ function RichTextEditor(props) {
                     children: "U"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5162,7 +5888,7 @@ function RichTextEditor(props) {
                     children: "UL"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5172,7 +5898,7 @@ function RichTextEditor(props) {
                     children: "1."
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5182,7 +5908,7 @@ function RichTextEditor(props) {
                     children: "L"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5192,7 +5918,7 @@ function RichTextEditor(props) {
                     children: "C"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5202,7 +5928,7 @@ function RichTextEditor(props) {
                     children: "R"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5214,13 +5940,13 @@ function RichTextEditor(props) {
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
               renderToolbarSectionHeader(
                 "insert",
                 props.locale["documents.richText.toolbar.insertLabel"]
               ),
-              isToolbarSectionOpen("insert") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              isToolbarSectionOpen("insert") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5230,7 +5956,7 @@ function RichTextEditor(props) {
                     children: "Link"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5242,13 +5968,13 @@ function RichTextEditor(props) {
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
               renderToolbarSectionHeader(
                 "media",
                 props.locale["documents.richText.toolbar.mediaLabel"]
               ),
-              isToolbarSectionOpen("media") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              isToolbarSectionOpen("media") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5258,7 +5984,7 @@ function RichTextEditor(props) {
                     children: "Image"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5270,13 +5996,13 @@ function RichTextEditor(props) {
                 )
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-section", children: [
               renderToolbarSectionHeader(
                 "history",
                 props.locale["documents.richText.toolbar.historyLabel"]
               ),
-              isToolbarSectionOpen("history") && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              isToolbarSectionOpen("history") && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5286,7 +6012,7 @@ function RichTextEditor(props) {
                     children: "Undo"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                   "button",
                   {
                     type: "button",
@@ -5299,13 +6025,13 @@ function RichTextEditor(props) {
               ] })
             ] })
           ] }),
-          toolbarState.hasSelectedImage && imageEditorState && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-context-panel", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-richtext-context-header", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: props.locale["documents.richText.imageEditorTitle"] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { children: props.locale["documents.richText.imageEditorHelp"] })
+          toolbarState.hasSelectedImage && imageEditorState && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-context-panel", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-richtext-context-header", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: props.locale["documents.richText.imageEditorTitle"] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: props.locale["documents.richText.imageEditorHelp"] })
             ] }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-image-editor", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-richtext-image-preview-card", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-image-editor", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-richtext-image-preview-card", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
                 "div",
                 {
                   ref: imagePreviewRef,
@@ -5315,7 +6041,7 @@ function RichTextEditor(props) {
                   onPointerUp: handleImagePreviewPointerUp,
                   onPointerCancel: handleImagePreviewPointerUp,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "img",
                       {
                         src: imageEditorState.src,
@@ -5326,7 +6052,7 @@ function RichTextEditor(props) {
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "div",
                       {
                         className: "hv-richtext-image-focus-point",
@@ -5339,11 +6065,11 @@ function RichTextEditor(props) {
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-image-controls", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageSizeLabel"] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-image-controls", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageSizeLabel"] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5352,7 +6078,7 @@ function RichTextEditor(props) {
                         children: "S"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5361,7 +6087,7 @@ function RichTextEditor(props) {
                         children: "M"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5370,7 +6096,7 @@ function RichTextEditor(props) {
                         children: "L"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5381,10 +6107,10 @@ function RichTextEditor(props) {
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageCropLabel"] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageCropLabel"] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5393,7 +6119,7 @@ function RichTextEditor(props) {
                         children: "Orig"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5402,7 +6128,7 @@ function RichTextEditor(props) {
                         children: "Wide"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5411,7 +6137,7 @@ function RichTextEditor(props) {
                         children: "1:1"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5422,10 +6148,10 @@ function RichTextEditor(props) {
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageAlignLabel"] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.imageAlignLabel"] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5434,7 +6160,7 @@ function RichTextEditor(props) {
                         children: "Left"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5443,7 +6169,7 @@ function RichTextEditor(props) {
                         children: "Center"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                       "button",
                       {
                         type: "button",
@@ -5454,9 +6180,9 @@ function RichTextEditor(props) {
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "hv-richtext-range-group", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: props.locale["documents.richText.imageZoom"] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { className: "hv-richtext-range-group", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: props.locale["documents.richText.imageZoom"] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                     "input",
                     {
                       type: "range",
@@ -5479,18 +6205,18 @@ function RichTextEditor(props) {
                       )
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("strong", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("strong", { children: [
                     imageEditorState.scale.toFixed(2),
                     "x"
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-focus-readout", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-focus-readout", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
                     "X ",
                     Math.round(imageEditorState.focusX),
                     "%"
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
                     "Y ",
                     Math.round(imageEditorState.focusY),
                     "%"
@@ -5499,10 +6225,10 @@ function RichTextEditor(props) {
               ] })
             ] })
           ] }),
-          !toolbarState.hasSelectedImage && toolbarState.insideTable && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-richtext-context-panel hv-richtext-context-panel-compact", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.tableLabel"] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-button-group", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          !toolbarState.hasSelectedImage && toolbarState.insideTable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-richtext-context-panel hv-richtext-context-panel-compact", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-toolbar-subgroup", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-toolbar-sublabel", children: props.locale["documents.richText.toolbar.tableLabel"] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-button-group", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5512,7 +6238,7 @@ function RichTextEditor(props) {
                   children: "+Row"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5522,7 +6248,7 @@ function RichTextEditor(props) {
                   children: "+Col"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5532,7 +6258,7 @@ function RichTextEditor(props) {
                   children: "-Row"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5544,10 +6270,10 @@ function RichTextEditor(props) {
               )
             ] })
           ] }) }),
-          props.mode === "create" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-template-panel", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-richtext-template-strip", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-template-label", children: props.locale["documents.richText.templates"] }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          props.mode === "create" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-template-panel", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-richtext-template-strip", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-template-label", children: props.locale["documents.richText.templates"] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "button",
                 {
                   type: "button",
@@ -5557,15 +6283,15 @@ function RichTextEditor(props) {
                 }
               )
             ] }),
-            areTemplatesVisible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-richtext-template-grid", children: authoringTemplates.map((template) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            areTemplatesVisible && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-richtext-template-grid", children: authoringTemplates.map((template) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
               "button",
               {
                 type: "button",
                 className: `hv-richtext-template-card ${selectedTemplateId === template.id ? "active" : ""}`,
                 onClick: () => applyTemplate(template.id),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-template-title", children: props.locale[template.labelKey] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "hv-richtext-template-description", children: props.locale[template.descriptionKey] })
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-template-title", children: props.locale[template.labelKey] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "hv-richtext-template-description", children: props.locale[template.descriptionKey] })
                 ]
               },
               template.id
@@ -5574,8 +6300,8 @@ function RichTextEditor(props) {
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.processingText"] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "hv-docx-editor-stage", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-page-container hv-docx-page-surface", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-loading-copy", children: props.locale["documents.richText.processingText"] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-docx-editor-stage", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "div",
         {
           ref: editorRef,
@@ -5599,7 +6325,7 @@ function RichTextEditor(props) {
           "aria-label": props.locale["a11y.editor"]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         SignatureOverlay,
         {
           surfaceKey: "document:main",
@@ -5607,11 +6333,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,
@@ -5631,7 +6359,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
         }
       )
     ] }) })
@@ -5640,9 +6369,9 @@ function RichTextEditor(props) {
 
 // src/editors/SpreadsheetEditor.tsx
 var import_exceljs2 = __toESM(require("exceljs"), 1);
-var import_react3 = require("react");
+var import_react4 = require("react");
 var XLSX2 = __toESM(require("xlsx"), 1);
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var MAX_RENDER_ROWS = 400;
 var MAX_RENDER_COLS = 120;
 function toColumnLabel2(index) {
@@ -6226,11 +6955,11 @@ async function buildSheetModels(arrayBuffer, fileName) {
 }
 function SpreadsheetEditor(props) {
   const readonly = props.mode === "view";
-  const [sheets, setSheets] = (0, import_react3.useState)([]);
-  const [activeCell, setActiveCell] = (0, import_react3.useState)({ row: 0, col: 0 });
-  const [hasEdits, setHasEdits] = (0, import_react3.useState)(false);
-  const [dirtyCellAddressesBySheet, setDirtyCellAddressesBySheet] = (0, import_react3.useState)({});
-  (0, import_react3.useEffect)(() => {
+  const [sheets, setSheets] = (0, import_react4.useState)([]);
+  const [activeCell, setActiveCell] = (0, import_react4.useState)({ row: 0, col: 0 });
+  const [hasEdits, setHasEdits] = (0, import_react4.useState)(false);
+  const [dirtyCellAddressesBySheet, setDirtyCellAddressesBySheet] = (0, import_react4.useState)({});
+  (0, import_react4.useEffect)(() => {
     if (!props.arrayBuffer) {
       const nextSheets = props.mode === "create" ? [createBlankSheetModel("Sheet1")] : [];
       setSheets(nextSheets);
@@ -6280,7 +7009,7 @@ function SpreadsheetEditor(props) {
     props.onThumbs,
     props.mode
   ]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     props.onExportStateChange?.(
       sheets.length > 0 ? {
         sheets,
@@ -6306,7 +7035,7 @@ function SpreadsheetEditor(props) {
     Math.min(props.currentPage - 1, Math.max(sheets.length - 1, 0))
   );
   const activeSheet = sheets[activeSheetIndex];
-  const mergeLookup = (0, import_react3.useMemo)(
+  const mergeLookup = (0, import_react4.useMemo)(
     () => createMergeLookup(activeSheet?.merges ?? []),
     [activeSheet]
   );
@@ -6383,12 +7112,12 @@ function SpreadsheetEditor(props) {
     );
   };
   if (!activeSheet) {
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "hv-empty-state", children: props.locale["documents.sheetMissing"] }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "hv-empty-state", children: props.locale["documents.sheetMissing"] }) }) });
   }
   const isTruncated = activeSheet.rowCount > activeSheet.renderedRowCount || activeSheet.colCount > activeSheet.renderedColCount;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-page-container hv-sheet-container", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-sheet-tabs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-sheet-tab-list", children: sheets.map((sheet, index) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-page-container hv-sheet-container", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-sheet-tabs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-sheet-tab-list", children: sheets.map((sheet, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
           type: "button",
@@ -6401,8 +7130,8 @@ function SpreadsheetEditor(props) {
         },
         sheet.name
       )) }),
-      !readonly && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-sheet-actions", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      !readonly && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-sheet-actions", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             type: "button",
@@ -6411,7 +7140,7 @@ function SpreadsheetEditor(props) {
             children: props.locale["documents.sheetAddSheet"]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             type: "button",
@@ -6420,7 +7149,7 @@ function SpreadsheetEditor(props) {
             children: props.locale["documents.sheetAddRow"]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "button",
           {
             type: "button",
@@ -6431,12 +7160,12 @@ function SpreadsheetEditor(props) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-sheet-formula-bar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-sheet-formula-cell", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-sheet-formula-bar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-sheet-formula-cell", children: [
         toColumnLabel2(activeCell.col),
         activeCell.row + 1
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
         {
           value: activeCellValue,
@@ -6446,14 +7175,14 @@ function SpreadsheetEditor(props) {
         }
       )
     ] }),
-    isTruncated && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-sheet-viewport-note", children: props.locale["documents.sheetTruncated"].replace("{rows}", String(activeSheet.renderedRowCount)).replace("{cols}", String(activeSheet.renderedColCount)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "hv-sheet-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "hv-sheet-surface", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { className: "hv-sheet-table", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { className: "hv-sheet-corner" }),
+    isTruncated && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-sheet-viewport-note", children: props.locale["documents.sheetTruncated"].replace("{rows}", String(activeSheet.renderedRowCount)).replace("{cols}", String(activeSheet.renderedColCount)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-sheet-scroll", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-sheet-surface", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { className: "hv-sheet-table", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { className: "hv-sheet-corner" }),
           Array.from(
             { length: activeSheet.renderedColCount },
-            (_, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            (_, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "th",
               {
                 className: "hv-sheet-column-header",
@@ -6467,12 +7196,12 @@ function SpreadsheetEditor(props) {
             )
           )
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: activeSheet.data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: activeSheet.data.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "tr",
           {
             style: { height: activeSheet.rowHeights[rowIndex] ?? 32 },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { className: "hv-sheet-row-header", children: rowIndex + 1 }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { className: "hv-sheet-row-header", children: rowIndex + 1 }),
               row.map((cellValue, colIndex) => {
                 const cellKey = makeCellKey(rowIndex, colIndex);
                 if (mergeLookup.covered.has(cellKey)) {
@@ -6481,7 +7210,7 @@ function SpreadsheetEditor(props) {
                 const merge = mergeLookup.starts.get(cellKey);
                 const cellModel = activeSheet.cells[cellKey];
                 const width = activeSheet.colWidths[colIndex] ?? 96;
-                return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                   "td",
                   {
                     rowSpan: merge ? merge.endRow - merge.startRow + 1 : 1,
@@ -6508,7 +7237,7 @@ function SpreadsheetEditor(props) {
           rowIndex
         )) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         SignatureOverlay,
         {
           surfaceKey: `sheet:${activeSheet.name}`,
@@ -6517,11 +7246,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,
@@ -6541,7 +7272,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
         }
       )
     ] }) })
@@ -6549,17 +7281,17 @@ function SpreadsheetEditor(props) {
 }
 
 // src/renderers/ImageRenderer.tsx
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ImageRenderer(props) {
-  const url = (0, import_react4.useMemo)(() => {
+  const url = (0, import_react5.useMemo)(() => {
     if (!props.arrayBuffer) {
       return void 0;
     }
     const mime = props.fileType === "svg" ? "image/svg+xml" : props.fileType === "png" ? "image/png" : "image/jpeg";
     return URL.createObjectURL(new Blob([props.arrayBuffer], { type: mime }));
   }, [props.arrayBuffer, props.fileType]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     return () => {
       if (url) {
         URL.revokeObjectURL(url);
@@ -6567,11 +7299,11 @@ function ImageRenderer(props) {
     };
   }, [url]);
   if (!props.arrayBuffer || !url) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "hv-empty-state", children: props.locale["documents.imageMissing"] }) }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hv-page-container", style: { padding: "48px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "hv-empty-state", children: props.locale["documents.imageMissing"] }) }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "hv-page-container hv-image-surface", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: url, alt: props.fileName, className: "hv-image-renderer" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hv-view-single", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hv-page-container hv-image-surface", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("img", { src: url, alt: props.fileName, className: "hv-image-renderer" }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       SignatureOverlay,
       {
         surfaceKey: "image:main",
@@ -6579,11 +7311,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,
@@ -6603,7 +7337,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
       }
     )
   ] }) });
@@ -6611,8 +7346,8 @@ function ImageRenderer(props) {
 
 // src/renderers/PdfRenderer.tsx
 var import_pdfjs_dist2 = require("pdfjs-dist");
-var import_react5 = require("react");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var pdfWorkerBlobUrlPromise2 = null;
 function yieldToBrowser() {
   return new Promise((resolve) => {
@@ -6637,10 +7372,10 @@ async function resolvePdfWorkerSrc(customWorkerSrc) {
 }
 function PdfRenderer(props) {
   const { url, arrayBuffer, layout, currentPage, workerSrc } = props;
-  const [doc, setDoc] = (0, import_react5.useState)(null);
-  const [error, setError] = (0, import_react5.useState)(null);
-  const thumbnailJobRef = (0, import_react5.useRef)(0);
-  (0, import_react5.useEffect)(() => {
+  const [doc, setDoc] = (0, import_react6.useState)(null);
+  const [error, setError] = (0, import_react6.useState)(null);
+  const thumbnailJobRef = (0, import_react6.useRef)(0);
+  (0, import_react6.useEffect)(() => {
     let active = true;
     const thumbnailJobId = thumbnailJobRef.current + 1;
     thumbnailJobRef.current = thumbnailJobId;
@@ -6704,7 +7439,7 @@ function PdfRenderer(props) {
     } catch (e) {
     }
   };
-  const pagesToRender = (0, import_react5.useMemo)(() => {
+  const pagesToRender = (0, import_react6.useMemo)(() => {
     if (!doc) return [];
     const p = Math.max(1, Math.min(currentPage, doc.numPages));
     if (layout === "side-by-side" && doc.numPages > 1) {
@@ -6715,16 +7450,16 @@ function PdfRenderer(props) {
     return [p];
   }, [doc, currentPage, layout]);
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "hv-page-container", style: { padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "hv-error-banner", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: props.locale["documents.pdfLoadErrorTitle"] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: error })
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hv-page-container", style: { padding: "32px" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "hv-error-banner", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("strong", { children: props.locale["documents.pdfLoadErrorTitle"] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { children: error })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "div",
     {
       className: `hv-doc-scroll ${layout === "side-by-side" ? "hv-view-double" : "hv-view-single"}`,
-      children: pagesToRender.map((page) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      children: pagesToRender.map((page) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
         PdfPage,
         {
           doc,
@@ -6741,8 +7476,8 @@ function PdfPage({
   pageNum,
   signatureOverlay
 }) {
-  const canvasRef = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(() => {
+  const canvasRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useEffect)(() => {
     if (!doc || !canvasRef.current) return;
     let active = true;
     const render = async () => {
@@ -6768,7 +7503,7 @@ function PdfPage({
       active = false;
     };
   }, [doc, pageNum]);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       className: "hv-page-container",
@@ -6779,8 +7514,8 @@ function PdfPage({
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("canvas", { ref: canvasRef, className: "hv-pdf-canvas" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("canvas", { ref: canvasRef, className: "hv-pdf-canvas" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           SignatureOverlay,
           {
             surfaceKey: `page:${pageNum}`,
@@ -6789,11 +7524,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,
@@ -6813,7 +7550,8 @@ function PdfPage({
             onRemovePlacement: signatureOverlay.onRemovePlacement,
             onRemoveAnnotation: signatureOverlay.onRemoveAnnotation,
             onSelectPlacement: signatureOverlay.onSelectPlacement,
-            onSelectAnnotation: signatureOverlay.onSelectAnnotation
+            onSelectAnnotation: signatureOverlay.onSelectAnnotation,
+            onCancelPlacementMode: signatureOverlay.onCancelPlacementMode
           }
         )
       ]
@@ -6822,9 +7560,9 @@ function PdfPage({
 }
 
 // src/renderers/PptxRenderer.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jszip2 = __toESM(require("jszip"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var NS_P = "http://schemas.openxmlformats.org/presentationml/2006/main";
 var NS_A = "http://schemas.openxmlformats.org/drawingml/2006/main";
 var NS_R = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
@@ -6845,11 +7583,11 @@ function isBrowserRenderableSlideImage(source) {
   return !/^data:image\/(?:emf|wmf|tiff)/i.test(source);
 }
 function PresentationImage(props) {
-  const [failed, setFailed] = (0, import_react6.useState)(!isBrowserRenderableSlideImage(props.src));
+  const [failed, setFailed] = (0, import_react7.useState)(!isBrowserRenderableSlideImage(props.src));
   if (failed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hv-slide-image-fallback", children: props.alt });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-slide-image-fallback", children: props.alt });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "img",
     {
       src: props.src,
@@ -7112,12 +7850,12 @@ function makeSlideThumbnail(slide, index) {
   return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
 }
 function PptxRenderer(props) {
-  const [slides, setSlides] = (0, import_react6.useState)([]);
-  const [slideSize, setSlideSize] = (0, import_react6.useState)({ width: 9144e3, height: 5143500 });
-  const [error, setError] = (0, import_react6.useState)(null);
-  const viewRef = (0, import_react6.useRef)(null);
-  const [viewWidth, setViewWidth] = (0, import_react6.useState)(SLIDE_RENDER_MAX_VIEW_WIDTH);
-  (0, import_react6.useEffect)(() => {
+  const [slides, setSlides] = (0, import_react7.useState)([]);
+  const [slideSize, setSlideSize] = (0, import_react7.useState)({ width: 9144e3, height: 5143500 });
+  const [error, setError] = (0, import_react7.useState)(null);
+  const viewRef = (0, import_react7.useRef)(null);
+  const [viewWidth, setViewWidth] = (0, import_react7.useState)(SLIDE_RENDER_MAX_VIEW_WIDTH);
+  (0, import_react7.useEffect)(() => {
     if (!props.arrayBuffer) {
       setSlides([]);
       props.onPageCount(1);
@@ -7169,7 +7907,7 @@ function PptxRenderer(props) {
     };
     loadPptx();
   }, [props.arrayBuffer, props.onExportStateChange]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     const host = viewRef.current;
     if (!host || typeof ResizeObserver === "undefined") {
       return;
@@ -7183,7 +7921,7 @@ function PptxRenderer(props) {
     observer.observe(host);
     return () => observer.disconnect();
   }, []);
-  const pagesToShow = (0, import_react6.useMemo)(() => {
+  const pagesToShow = (0, import_react7.useMemo)(() => {
     if (slides.length === 0) {
       return [];
     }
@@ -7197,7 +7935,7 @@ function PptxRenderer(props) {
     }
     return [validPage];
   }, [slides.length, props.currentPage, props.layout]);
-  const slideViewportWidth = (0, import_react6.useMemo)(() => {
+  const slideViewportWidth = (0, import_react7.useMemo)(() => {
     const boundedWidth = Math.max(
       SLIDE_RENDER_MIN_VIEW_WIDTH,
       Math.min(viewWidth, SLIDE_RENDER_MAX_VIEW_WIDTH * 2 + SLIDE_RENDER_GAP)
@@ -7217,9 +7955,9 @@ function PptxRenderer(props) {
   const sceneHeight = Math.max(1, Math.round(slideSize.height * sceneCoordScale));
   const sceneScale = slideViewportWidth / SLIDE_RENDER_BASE_WIDTH;
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hv-error-banner", children: error });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-error-banner", children: error });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       ref: viewRef,
@@ -7229,7 +7967,7 @@ function PptxRenderer(props) {
         if (!slide) {
           return null;
         }
-        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
           "div",
           {
             className: "hv-page-container hv-slide-surface",
@@ -7237,12 +7975,12 @@ function PptxRenderer(props) {
               aspectRatio: `${slideSize.width}/${slideSize.height}`,
               width: props.layout === "side-by-side" && pagesToShow.length > 1 ? `${slideViewportWidth}px` : void 0
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "div",
               {
                 className: "hv-slide-stage",
                 style: { background: slide.background || "#ffffff" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                   "div",
                   {
                     className: "hv-slide-scene",
@@ -7252,7 +7990,7 @@ function PptxRenderer(props) {
                       transform: `scale(${sceneScale})`
                     },
                     children: [
-                      slide.elements.map((element) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      slide.elements.map((element) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "div",
                         {
                           className: `hv-slide-element ${element.kind}`,
@@ -7265,20 +8003,20 @@ function PptxRenderer(props) {
                             background: element.kind === "shape" ? element.fill || "transparent" : void 0,
                             borderColor: element.stroke
                           },
-                          children: element.kind === "image" && element.imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                          children: element.kind === "image" && element.imageSrc ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                             PresentationImage,
                             {
                               src: element.imageSrc,
                               alt: element.alt || "Slide image"
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "hv-slide-textbox", children: element.paragraphs?.map((paragraph, paragraphIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-slide-textbox", children: element.paragraphs?.map((paragraph, paragraphIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                             "p",
                             {
                               className: `hv-slide-paragraph ${alignToClassName(paragraph.align)}`,
                               style: { paddingInlineStart: `${paragraph.level * 18}px` },
                               children: [
-                                paragraph.bullet && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hv-slide-bullet", children: "\u2022" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "hv-slide-paragraph-copy", children: paragraph.runs.map((run, runIndex) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                                paragraph.bullet && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hv-slide-bullet", children: "\u2022" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hv-slide-paragraph-copy", children: paragraph.runs.map((run, runIndex) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                                   "span",
                                   {
                                     style: {
@@ -7303,7 +8041,7 @@ function PptxRenderer(props) {
                         },
                         element.id
                       )),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         SignatureOverlay,
                         {
                           surfaceKey: `slide:${pageNumber}`,
@@ -7312,11 +8050,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,
@@ -7336,7 +8076,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
                         }
                       )
                     ]
@@ -7374,13 +8115,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",
@@ -7390,7 +8131,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",
@@ -7479,8 +8220,8 @@ var defaultLocale = {
 
 // src/components/SignaturePanel.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function sameSignature(left, right) {
   if (left.id && right.id) {
     return left.id === right.id;
@@ -7550,12 +8291,12 @@ function SignaturePanel(props) {
     onSignRequest,
     locale
   } = props;
-  const canvasRef = (0, import_react7.useRef)(null);
-  const [localSignatures, setLocalSignatures] = (0, import_react7.useState)([]);
-  const [showModal, setShowModal] = (0, import_react7.useState)(false);
-  const [isDrawing, setIsDrawing] = (0, import_react7.useState)(false);
-  const [hasInk, setHasInk] = (0, import_react7.useState)(false);
-  const signatures = (0, import_react7.useMemo)(() => {
+  const canvasRef = (0, import_react8.useRef)(null);
+  const [localSignatures, setLocalSignatures] = (0, import_react8.useState)([]);
+  const [showModal, setShowModal] = (0, import_react8.useState)(false);
+  const [isDrawing, setIsDrawing] = (0, import_react8.useState)(false);
+  const [hasInk, setHasInk] = (0, import_react8.useState)(false);
+  const signatures = (0, import_react8.useMemo)(() => {
     const merged = [];
     for (const signature of [...externalSignatures, ...localSignatures]) {
       if (!merged.some((item) => sameSignature(item, signature))) {
@@ -7651,34 +8392,34 @@ function SignaturePanel(props) {
     ctx.lineTo(x, y);
     ctx.stroke();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
         className: `hv-sidebar hv-sidebar-right ${!isOpen ? "collapsed" : ""}`,
         style: { width: isOpen ? "300px" : "0" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "div",
             {
               className: "hv-sidebar-header",
               style: { justifyContent: "space-between", padding: "12px 16px" },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { margin: 0, fontSize: "15px", fontWeight: 600 }, children: locale["signatures.title"] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { margin: 0, fontSize: "15px", fontWeight: 600 }, children: locale["signatures.title"] }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     onClick: onClose,
                     className: "hv-btn",
                     style: { padding: "4px", border: "none" },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.X, { size: 18 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.X, { size: 18 })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-thumb-list", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-thumb-list", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
               "button",
               {
                 onClick: handleCreateClick,
@@ -7691,25 +8432,26 @@ function SignaturePanel(props) {
                   color: "var(--hv-primary)"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Plus, { size: 18, style: { marginRight: "8px" } }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Plus, { size: 18, style: { marginRight: "8px" } }),
                   locale["signatures.new"]
                 ]
               }
             ),
-            selectedSignature && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-signature-selection-card", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-signature-selection-title", children: locale["signatures.ready"] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                "img",
+            selectedSignature && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-signature-selection-card", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-signature-selection-title", children: locale["signatures.ready"] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                RenderableSignatureImage,
                 {
-                  src: selectedSignature.signatureImageUrl,
+                  signatureImageUrl: selectedSignature.signatureImageUrl,
+                  inkColor: selectedColor,
                   alt: selectedSignature.signedBy ? `Selected signature by ${selectedSignature.signedBy}` : "Selected signature",
                   className: "hv-signature-selection-image"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-signature-selection-copy", children: locale["signatures.placeHint"] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-signature-color-picker", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hv-signature-color-picker-label", children: locale["signatures.color"] }),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-signature-selection-copy", children: locale["signatures.placeHint"] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-signature-color-picker", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hv-signature-color-picker-label", children: locale["signatures.color"] }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-signature-color-swatch-row", children: SIGNATURE_INK_COLORS.map((color) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "button",
                   {
                     type: "button",
@@ -7722,7 +8464,7 @@ function SignaturePanel(props) {
                   color
                 )) })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                 "button",
                 {
                   type: "button",
@@ -7733,45 +8475,46 @@ function SignaturePanel(props) {
                 }
               )
             ] }),
-            signatures.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-signature-empty", children: locale["signatures.empty"] }),
+            signatures.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-signature-empty", children: locale["signatures.empty"] }),
             signatures.map((signature, index) => {
               const isLocal = localSignatures.some(
                 (item) => sameSignature(item, signature)
               );
               const isSelected = selectedSignature ? sameSignature(selectedSignature, signature) : false;
-              return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                 "div",
                 {
                   className: `hv-thumb-item hv-signature-item ${isSelected ? "active" : ""}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                       "button",
                       {
                         type: "button",
                         className: "hv-signature-item-main",
                         onClick: () => onSelectSignature(signature),
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-signature-item-stack", children: [
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                              "img",
+                          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-signature-item-stack", children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                              RenderableSignatureImage,
                               {
-                                src: signature.signatureImageUrl,
+                                signatureImageUrl: signature.signatureImageUrl,
+                                inkColor: "black",
                                 alt: signature.signedBy ? `Signature by ${signature.signedBy}` : "Signature",
                                 className: "hv-signature-item-image"
                               }
                             ),
-                            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-signature-item-copy", children: [
-                              signature.signedBy && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("strong", { children: signature.signedBy }),
-                              signature.jobTitle && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: signature.jobTitle }),
-                              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: normalizeSignatureDate(signature.dateSigned) }),
-                              signature.comment && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("em", { children: signature.comment })
+                            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-signature-item-copy", children: [
+                              signature.signedBy && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("strong", { children: signature.signedBy }),
+                              signature.jobTitle && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: signature.jobTitle }),
+                              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: normalizeSignatureDate(signature.dateSigned) }),
+                              signature.comment && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("em", { children: signature.comment })
                             ] })
                           ] }),
-                          isSelected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "hv-signature-item-check", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Check, { size: 14 }) })
+                          isSelected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "hv-signature-item-check", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Check, { size: 14 }) })
                         ]
                       }
                     ),
-                    isLocal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                    isLocal && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                       "button",
                       {
                         type: "button",
@@ -7794,7 +8537,7 @@ function SignaturePanel(props) {
                             onClearSelection();
                           }
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.Trash2, { size: 12 })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.Trash2, { size: 12 })
                       }
                     )
                   ]
@@ -7806,8 +8549,8 @@ function SignaturePanel(props) {
         ]
       }
     ),
-    showModal && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "hv-modal-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "hv-modal", style: { width: "450px", maxWidth: "90vw" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    showModal && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-modal-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "hv-modal", style: { width: "450px", maxWidth: "90vw" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           style: {
@@ -7818,20 +8561,20 @@ function SignaturePanel(props) {
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: locale["signatures.drawTitle"] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { style: { margin: 0, fontSize: "18px", fontWeight: 600 }, children: locale["signatures.drawTitle"] }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 onClick: () => setShowModal(false),
                 className: "hv-btn",
                 style: { border: "none" },
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react2.X, { size: 20 })
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.X, { size: 20 })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           style: {
@@ -7842,7 +8585,7 @@ function SignaturePanel(props) {
             alignItems: "center"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "div",
               {
                 style: {
@@ -7852,7 +8595,7 @@ function SignaturePanel(props) {
                   overflow: "hidden",
                   boxShadow: "inset 0 2px 4px 0 rgba(0,0,0,0.05)"
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "canvas",
                   {
                     ref: canvasRef,
@@ -7874,7 +8617,7 @@ function SignaturePanel(props) {
                 )
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "p",
               {
                 style: {
@@ -7888,7 +8631,7 @@ function SignaturePanel(props) {
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           style: {
@@ -7899,8 +8642,8 @@ function SignaturePanel(props) {
             gap: "12px"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { onClick: clearCanvas, className: "hv-btn", children: locale["signatures.clear"] }),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("button", { onClick: clearCanvas, className: "hv-btn", children: locale["signatures.clear"] }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "button",
               {
                 onClick: saveSignature,
@@ -7917,16 +8660,16 @@ function SignaturePanel(props) {
 }
 
 // src/components/ThumbnailsSidebar.tsx
-var import_react8 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var THUMB_ITEM_HEIGHT = 184;
 var THUMB_OVERSCAN = 4;
 function ThumbnailsSidebar(props) {
   const { isOpen, thumbnails, currentPage, onSelectPage, locale } = props;
-  const listRef = (0, import_react8.useRef)(null);
-  const [scrollTop, setScrollTop] = (0, import_react8.useState)(0);
-  const [viewportHeight, setViewportHeight] = (0, import_react8.useState)(0);
-  (0, import_react8.useEffect)(() => {
+  const listRef = (0, import_react9.useRef)(null);
+  const [scrollTop, setScrollTop] = (0, import_react9.useState)(0);
+  const [viewportHeight, setViewportHeight] = (0, import_react9.useState)(0);
+  (0, import_react9.useEffect)(() => {
     const element = listRef.current;
     if (!element || !isOpen) {
       return;
@@ -7947,7 +8690,7 @@ function ThumbnailsSidebar(props) {
       behavior: "smooth"
     });
   }, [currentPage, isOpen]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     const element = listRef.current;
     if (!element) {
       return;
@@ -7976,7 +8719,7 @@ function ThumbnailsSidebar(props) {
       window.removeEventListener("resize", updateViewport);
     };
   }, []);
-  const virtualWindow = (0, import_react8.useMemo)(() => {
+  const virtualWindow = (0, import_react9.useMemo)(() => {
     if (thumbnails.length === 0) {
       return {
         startIndex: 0,
@@ -8002,15 +8745,15 @@ function ThumbnailsSidebar(props) {
       totalHeight: thumbnails.length * THUMB_ITEM_HEIGHT
     };
   }, [scrollTop, thumbnails.length, viewportHeight]);
-  const visibleItems = (0, import_react8.useMemo)(
+  const visibleItems = (0, import_react9.useMemo)(
     () => thumbnails.slice(
       virtualWindow.startIndex,
       virtualWindow.endIndex >= virtualWindow.startIndex ? virtualWindow.endIndex + 1 : virtualWindow.startIndex
     ),
     [thumbnails, virtualWindow.endIndex, virtualWindow.startIndex]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `hv-sidebar ${!isOpen ? "collapsed" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { ref: listRef, className: "hv-thumb-list", children: [
-    thumbnails.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: `hv-sidebar ${!isOpen ? "collapsed" : ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: listRef, className: "hv-thumb-list", children: [
+    thumbnails.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "div",
       {
         className: "hv-thumb-viewport",
@@ -8019,22 +8762,22 @@ function ThumbnailsSidebar(props) {
           const absoluteIndex = virtualWindow.startIndex + index;
           const pageNum = absoluteIndex + 1;
           const isActive = pageNum === currentPage;
-          return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
             "div",
             {
               className: `hv-thumb-item ${isActive ? "active" : ""}`,
               style: { top: `${absoluteIndex * THUMB_ITEM_HEIGHT}px` },
               onClick: () => onSelectPage(pageNum),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-thumb-preview", children: src ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hv-thumb-preview", children: src ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                   "img",
                   {
                     src,
                     alt: `Page ${pageNum}`,
                     className: "hv-thumb-img"
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-thumb-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: "..." }) }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "hv-thumb-label", children: [
+                ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hv-thumb-skeleton", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "..." }) }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: "hv-thumb-label", children: [
                   locale["thumbnails.page"],
                   " ",
                   pageNum
@@ -8046,13 +8789,13 @@ function ThumbnailsSidebar(props) {
         })
       }
     ),
-    thumbnails.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "hv-thumb-empty", children: locale["thumbnails.empty"] })
+    thumbnails.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "hv-thumb-empty", children: locale["thumbnails.empty"] })
   ] }) });
 }
 
 // src/components/Toolbar.tsx
 var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Toolbar(props) {
   const {
     fileName,
@@ -8088,18 +8831,18 @@ function Toolbar(props) {
       onPageChange(val);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hv-toolbar", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hv-toolbar-group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-toolbar", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-toolbar-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: `hv-btn ${props.showThumbnails ? "hv-btn-active" : ""}`,
           onClick: props.onToggleThumbnails,
           title: locale["toolbar.thumbs"],
-          children: props.showThumbnails ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.PanelLeftClose, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.PanelLeftOpen, { size: 20 })
+          children: props.showThumbnails ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.PanelLeftClose, { size: 20 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.PanelLeftOpen, { size: 20 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
           className: "hv-sep",
@@ -8111,7 +8854,7 @@ function Toolbar(props) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "span",
         {
           style: {
@@ -8126,18 +8869,18 @@ function Toolbar(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hv-toolbar-group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-toolbar-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: "hv-btn",
           disabled: currentPage <= 1,
           onClick: handlePrev,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronLeft, { size: 20 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ChevronLeft, { size: 20 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hv-toolbar-page-group", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-toolbar-page-group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "input",
           {
             type: "number",
@@ -8148,53 +8891,53 @@ function Toolbar(props) {
             max: pageCount
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hv-toolbar-page-sep", children: "/" }),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: pageCount })
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hv-toolbar-page-sep", children: "/" }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: pageCount })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: "hv-btn",
           disabled: currentPage >= pageCount,
           onClick: handleNext,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ChevronRight, { size: 20 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ChevronRight, { size: 20 })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "hv-toolbar-group", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-toolbar-group", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: "hv-btn",
           onClick: onZoomOut,
           title: locale["toolbar.zoomOut"],
           disabled: zoom <= 0.5,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ZoomOut, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ZoomOut, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: "hv-btn",
           onClick: onZoomReset,
           title: locale["toolbar.zoomReset"],
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { style: { fontSize: "12px", fontWeight: 600 }, children: [
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { style: { fontSize: "12px", fontWeight: 600 }, children: [
             Math.round(zoom * 100),
             "%"
           ] })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: "hv-btn",
           onClick: onZoomIn,
           title: locale["toolbar.zoomIn"],
           disabled: zoom >= 2,
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.ZoomIn, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ZoomIn, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
           className: "hv-sep",
@@ -8206,37 +8949,37 @@ function Toolbar(props) {
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: `hv-btn ${layout === "single" ? "hv-btn-active" : ""}`,
           onClick: () => onLayoutChange("single"),
           title: locale["toolbar.layout.single"],
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.LayoutTemplate, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.LayoutTemplate, { size: 18 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "button",
         {
           className: `hv-btn ${layout === "side-by-side" ? "hv-btn-active" : ""}`,
           onClick: () => onLayoutChange("side-by-side"),
           title: locale["toolbar.layout.two"],
-          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Grid2X2, { size: 18 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Grid2X2, { size: 18 })
         }
       ),
-      showHeaderFooterToggle && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      showHeaderFooterToggle && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "button",
         {
           className: `hv-btn ${headerFooterVisible ? "hv-btn-active" : ""}`,
           onClick: onToggleHeaderFooter,
           title: locale["toolbar.headerFooter"],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { style: { fontSize: "12px", fontWeight: 700, marginRight: "8px" }, children: "HF" }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.headerFooter"] })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { style: { fontSize: "12px", fontWeight: 700, marginRight: "8px" }, children: "HF" }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.headerFooter"] })
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
         "div",
         {
           className: "hv-sep",
@@ -8248,18 +8991,18 @@ function Toolbar(props) {
           }
         }
       ),
-      saveEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
-        showExportPdfAction && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      saveEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        showExportPdfAction && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
           {
             className: "hv-btn",
             onClick: onExportPdf,
             title: locale["toolbar.exportPdf"],
             disabled: isSaving,
-            children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.FileDown, { size: 18 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.FileDown, { size: 18 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
           "button",
           {
             className: "hv-btn hv-btn-primary",
@@ -8267,12 +9010,12 @@ function Toolbar(props) {
             title: saveLabel ?? locale["toolbar.save"],
             disabled: isSaving,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.Save, { size: 18, style: { marginRight: "8px" } }),
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hv-btn-label", children: isSaving ? locale.loading : saveLabel ?? locale["toolbar.save"] })
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.Save, { size: 18, style: { marginRight: "8px" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hv-btn-label", children: isSaving ? locale.loading : saveLabel ?? locale["toolbar.save"] })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "div",
           {
             className: "hv-sep",
@@ -8285,27 +9028,27 @@ function Toolbar(props) {
           }
         )
       ] }),
-      props.annotationEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      props.annotationEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "button",
         {
           className: `hv-btn ${props.annotationMode ? "hv-btn-active" : ""}`,
           onClick: props.onToggleAnnotationMode,
           title: locale["toolbar.annotate"],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.MessageSquarePlus, { size: 18, style: { marginRight: "8px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.annotate"] })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.MessageSquarePlus, { size: 18, style: { marginRight: "8px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.annotate"] })
           ]
         }
       ),
-      props.signingEnabled && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      props.signingEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
         "button",
         {
           className: `hv-btn hv-btn-primary ${props.showSignatures ? "hv-btn-active" : ""}`,
           onClick: props.onToggleSignatures,
           title: locale["toolbar.sign"],
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_lucide_react3.PenLine, { size: 18, style: { marginRight: "8px" } }),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.sign"] })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.PenLine, { size: 18, style: { marginRight: "8px" } }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "hv-btn-label", children: locale["toolbar.sign"] })
           ]
         }
       )
@@ -8314,7 +9057,7 @@ function Toolbar(props) {
 }
 
 // src/components/DocumentViewer.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function createPlacementId() {
   return `sig-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
 }
@@ -8398,56 +9141,56 @@ function getFileNameHint(fileUrl, fileName) {
 function DocumentViewer(props) {
   const mode = props.mode ?? "view";
   const theme = props.theme ?? "light";
-  const locale = (0, import_react9.useMemo)(
+  const locale = (0, import_react10.useMemo)(
     () => ({ ...defaultLocale, ...props.locale }),
     [props.locale]
   );
-  const [layout, setLayout] = (0, import_react9.useState)(
+  const [layout, setLayout] = (0, import_react10.useState)(
     props.defaultLayout ?? "single"
   );
-  const [showThumbnails, setShowThumbnails] = (0, import_react9.useState)(
+  const [showThumbnails, setShowThumbnails] = (0, import_react10.useState)(
     props.defaultShowThumbnails ?? true
   );
-  const [showHeaderFooterSlots, setShowHeaderFooterSlots] = (0, import_react9.useState)(true);
-  const [showSignatures, setShowSignatures] = (0, import_react9.useState)(false);
-  const [zoom, setZoom] = (0, import_react9.useState)(1);
-  const mainRef = (0, import_react9.useRef)(null);
-  const zoomStageRef = (0, import_react9.useRef)(null);
-  const exportHeaderRef = (0, import_react9.useRef)(null);
-  const exportFooterRef = (0, import_react9.useRef)(null);
-  const [selectedSignature, setSelectedSignature] = (0, import_react9.useState)(
+  const [showHeaderFooterSlots, setShowHeaderFooterSlots] = (0, import_react10.useState)(true);
+  const [showSignatures, setShowSignatures] = (0, import_react10.useState)(false);
+  const [zoom, setZoom] = (0, import_react10.useState)(1);
+  const mainRef = (0, import_react10.useRef)(null);
+  const zoomStageRef = (0, import_react10.useRef)(null);
+  const exportHeaderRef = (0, import_react10.useRef)(null);
+  const exportFooterRef = (0, import_react10.useRef)(null);
+  const [selectedSignature, setSelectedSignature] = (0, import_react10.useState)(
     null
   );
-  const [selectedSignatureColor, setSelectedSignatureColor] = (0, import_react9.useState)("black");
-  const [isPlacingAnnotation, setIsPlacingAnnotation] = (0, import_react9.useState)(false);
-  const [activePlacementId, setActivePlacementId] = (0, import_react9.useState)(
+  const [selectedSignatureColor, setSelectedSignatureColor] = (0, import_react10.useState)("black");
+  const [isPlacingAnnotation, setIsPlacingAnnotation] = (0, import_react10.useState)(false);
+  const [activePlacementId, setActivePlacementId] = (0, import_react10.useState)(
     null
   );
-  const [activeAnnotationId, setActiveAnnotationId] = (0, import_react9.useState)(
+  const [activeAnnotationId, setActiveAnnotationId] = (0, import_react10.useState)(
     null
   );
-  const [resolved, setResolved] = (0, import_react9.useState)(null);
-  const [loading, setLoading] = (0, import_react9.useState)(true);
-  const [error, setError] = (0, import_react9.useState)("");
-  const [isSaving, setIsSaving] = (0, import_react9.useState)(false);
-  const [pageCount, setPageCount] = (0, import_react9.useState)(1);
-  const [currentPage, setCurrentPage] = (0, import_react9.useState)(1);
-  const [thumbnails, setThumbnails] = (0, import_react9.useState)([]);
-  const [richTextExportState, setRichTextExportState] = (0, import_react9.useState)(null);
-  const [spreadsheetExportState, setSpreadsheetExportState] = (0, import_react9.useState)(null);
-  const [pptxExportState, setPptxExportState] = (0, import_react9.useState)(null);
-  const [internalPlacements, setInternalPlacements] = (0, import_react9.useState)(props.signaturePlacements ?? []);
-  const [internalAnnotations, setInternalAnnotations] = (0, import_react9.useState)(props.annotations ?? []);
-  const [zoomStageSize, setZoomStageSize] = (0, import_react9.useState)({ width: 0, height: 0 });
-  const [mainContentWidth, setMainContentWidth] = (0, import_react9.useState)(0);
-  const placements = (0, import_react9.useMemo)(
+  const [resolved, setResolved] = (0, import_react10.useState)(null);
+  const [loading, setLoading] = (0, import_react10.useState)(true);
+  const [error, setError] = (0, import_react10.useState)("");
+  const [isSaving, setIsSaving] = (0, import_react10.useState)(false);
+  const [pageCount, setPageCount] = (0, import_react10.useState)(1);
+  const [currentPage, setCurrentPage] = (0, import_react10.useState)(1);
+  const [thumbnails, setThumbnails] = (0, import_react10.useState)([]);
+  const [richTextExportState, setRichTextExportState] = (0, import_react10.useState)(null);
+  const [spreadsheetExportState, setSpreadsheetExportState] = (0, import_react10.useState)(null);
+  const [pptxExportState, setPptxExportState] = (0, import_react10.useState)(null);
+  const [internalPlacements, setInternalPlacements] = (0, import_react10.useState)(props.signaturePlacements ?? []);
+  const [internalAnnotations, setInternalAnnotations] = (0, import_react10.useState)(props.annotations ?? []);
+  const [zoomStageSize, setZoomStageSize] = (0, import_react10.useState)({ width: 0, height: 0 });
+  const [mainContentWidth, setMainContentWidth] = (0, import_react10.useState)(0);
+  const placements = (0, import_react10.useMemo)(
     () => (props.signaturePlacements ?? internalPlacements).map(
       (placement) => normalizeSignaturePlacement(placement)
     ),
     [internalPlacements, props.signaturePlacements]
   );
   const annotations = props.annotations ?? internalAnnotations;
-  const availableSignatures = (0, import_react9.useMemo)(
+  const availableSignatures = (0, import_react10.useMemo)(
     () => (props.signatures ?? []).map((signature) => normalizeSignature(signature)),
     [props.signatures]
   );
@@ -8482,7 +9225,7 @@ function DocumentViewer(props) {
   const isRichTextAuthoringMode = Boolean(
     resolved && ["docx", "doc", "rtf", "txt", "md"].includes(resolved.fileType) && effectiveMode !== "view"
   );
-  const finalizedSignatures = (0, import_react9.useMemo)(() => {
+  const finalizedSignatures = (0, import_react10.useMemo)(() => {
     const seen = /* @__PURE__ */ new Set();
     return placements.flatMap((placement) => {
       const signature = placement.signature;
@@ -8494,7 +9237,7 @@ function DocumentViewer(props) {
       return [signature];
     });
   }, [placements]);
-  const signatureList = (0, import_react9.useMemo)(
+  const signatureList = (0, import_react10.useMemo)(
     () => placements.map((placement) => ({
       placementId: placement.id,
       signatureId: placement.signatureId,
@@ -8509,41 +9252,41 @@ function DocumentViewer(props) {
     })),
     [placements]
   );
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (props.signaturePlacements) {
       setInternalPlacements(props.signaturePlacements);
     }
   }, [props.signaturePlacements]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (props.annotations) {
       setInternalAnnotations(props.annotations);
     }
   }, [props.annotations]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setShowThumbnails(props.defaultShowThumbnails ?? true);
   }, [props.defaultShowThumbnails]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setLayout(props.defaultLayout ?? "single");
   }, [props.defaultLayout]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!signingEnabled) {
       setShowSignatures(false);
       setSelectedSignature(null);
       setActivePlacementId(null);
     }
   }, [signingEnabled]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!annotationEnabled) {
       setIsPlacingAnnotation(false);
       setActiveAnnotationId(null);
     }
   }, [annotationEnabled]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!headerFooterToggleEnabled) {
       setShowHeaderFooterSlots(true);
     }
   }, [headerFooterToggleEnabled]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     let active = true;
     let cleanupSource;
     const loadFile = async () => {
@@ -8602,7 +9345,7 @@ function DocumentViewer(props) {
     props.fileUrl,
     requestedFileType
   ]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setZoom(1);
     setCurrentPage(1);
     setSelectedSignature(null);
@@ -8620,7 +9363,7 @@ function DocumentViewer(props) {
       setInternalAnnotations([]);
     }
   }, [mode, props.fileUrl, props.fileName, props.fileType, props.blob, props.base64]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const element = zoomStageRef.current;
     if (!element) {
       return;
@@ -8678,7 +9421,7 @@ function DocumentViewer(props) {
     showSignatures,
     showThumbnails
   ]);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const element = mainRef.current;
     if (!element) {
       return;
@@ -8712,7 +9455,7 @@ function DocumentViewer(props) {
       window.removeEventListener("resize", scheduleMeasure);
     };
   }, []);
-  const zoomShellStyle = (0, import_react9.useMemo)(
+  const zoomShellStyle = (0, import_react10.useMemo)(
     () => {
       const baseWidth = isRichTextAuthoringMode && mainContentWidth > 0 ? mainContentWidth : zoomStageSize.width;
       return {
@@ -8723,7 +9466,7 @@ function DocumentViewer(props) {
     },
     [isRichTextAuthoringMode, mainContentWidth, zoom, zoomStageSize.height, zoomStageSize.width]
   );
-  const zoomStageStyle = (0, import_react9.useMemo)(
+  const zoomStageStyle = (0, import_react10.useMemo)(
     () => {
       const baseWidth = isRichTextAuthoringMode && mainContentWidth > 0 ? mainContentWidth : zoomStageSize.width;
       return {
@@ -8753,12 +9496,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(),
@@ -8777,8 +9525,7 @@ function DocumentViewer(props) {
     });
     updatePlacements((prev) => [...prev, nextPlacement]);
     setSelectedSignature(null);
-    setSelectedSignatureColor("black");
-    setActivePlacementId(null);
+    setActivePlacementId(nextPlacement.id);
     setActiveAnnotationId(null);
   };
   const handlePlaceAnnotation = (annotation) => {
@@ -8828,11 +9575,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"],
@@ -8859,17 +9608,22 @@ 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 = (0, import_react9.useMemo)(() => {
+  const saveReady = (0, import_react10.useMemo)(() => {
     if (!resolved) {
       return false;
     }
@@ -8904,7 +9658,7 @@ function DocumentViewer(props) {
     spreadsheetExportState
   ]);
   const saveEnabled = Boolean(props.onSave) && Boolean(resolved) && !loading && saveReady;
-  const exportLabels = (0, import_react9.useMemo)(
+  const exportLabels = (0, import_react10.useMemo)(
     () => ({
       annotationTitle: locale["annotations.title"],
       linkedAnnotationTitle: locale["annotations.linkedTitle"],
@@ -9058,20 +9812,20 @@ function DocumentViewer(props) {
   };
   const renderContent = () => {
     if (error) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hv-status-shell", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-error-banner", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: locale["error.title"] }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: error })
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-status-shell", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-error-banner", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: locale["error.title"] }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: error })
       ] }) });
     }
     if (loading || !resolved) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hv-status-shell", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-loader", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hv-spinner" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: locale.loading })
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-status-shell", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-loader", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-spinner" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { children: locale.loading })
       ] }) });
     }
-    const renderCapabilityNotice = (title, description, variant = "info") => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `hv-info-banner${variant === "warning" ? " warning" : ""}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("strong", { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { children: description })
+    const renderCapabilityNotice = (title, description, variant = "info") => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `hv-info-banner${variant === "warning" ? " warning" : ""}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("strong", { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: description })
     ] });
     const shouldShowModeAdjustedNotice = showModeFallbackNotice || showCreateUnsupportedNotice && hasRenderableSource;
     const modeAdjustedNotice = shouldShowModeAdjustedNotice ? renderCapabilityNotice(
@@ -9082,7 +9836,7 @@ function DocumentViewer(props) {
       ).replace("{fileType}", getReadableFileTypeLabel(resolved.fileType))
     ) : null;
     if (showCreateUnsupportedNotice && !hasRenderableSource) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hv-page-container", style: { padding: "32px" }, children: renderCapabilityNotice(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-page-container", style: { padding: "32px" }, children: renderCapabilityNotice(
         locale["documents.createUnsupportedTitle"],
         locale["documents.createUnsupportedDescription"].replace(
           "{formats}",
@@ -9105,9 +9859,9 @@ function DocumentViewer(props) {
     };
     switch (resolved.fileType) {
       case "pdf":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             PdfRenderer,
             {
               url: resolved.url,
@@ -9121,9 +9875,9 @@ function DocumentViewer(props) {
       case "rtf":
       case "txt":
       case "md":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             RichTextEditor,
             {
               mode: effectiveMode,
@@ -9135,9 +9889,9 @@ function DocumentViewer(props) {
       case "xlsx":
       case "csv":
       case "xls":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             SpreadsheetEditor,
             {
               mode: effectiveMode,
@@ -9148,9 +9902,9 @@ function DocumentViewer(props) {
         ] });
       case "pptx":
       case "ppt":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             PptxRenderer,
             {
               onExportStateChange: setPptxExportState,
@@ -9164,20 +9918,20 @@ function DocumentViewer(props) {
       case "gif":
       case "bmp":
       case "svg":
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
           modeAdjustedNotice,
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ImageRenderer, { ...commonProps, fileType: resolved.fileType })
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ImageRenderer, { ...commonProps, fileType: resolved.fileType })
         ] });
       default:
-        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hv-status-shell", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-error-banner", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-status-shell", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-error-banner", children: [
           locale["documents.unsupportedFileType"],
           ": ",
           resolved.fileType
         ] }) });
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-root", "data-hv-theme": theme, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-root", "data-hv-theme": theme, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       Toolbar,
       {
         fileName: resolved?.fileName,
@@ -9224,8 +9978,8 @@ function DocumentViewer(props) {
         locale
       }
     ),
-    (props.headerComponent || props.footerComponent) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-export-slot-host", "aria-hidden": "true", children: [
-      props.headerComponent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    (props.headerComponent || props.footerComponent) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-export-slot-host", "aria-hidden": "true", children: [
+      props.headerComponent && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           ref: exportHeaderRef,
@@ -9233,7 +9987,7 @@ function DocumentViewer(props) {
           children: props.headerComponent
         }
       ),
-      props.footerComponent && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      props.footerComponent && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "div",
         {
           ref: exportFooterRef,
@@ -9242,8 +9996,8 @@ function DocumentViewer(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "hv-shell", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "hv-shell", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         ThumbnailsSidebar,
         {
           isOpen: showThumbnails,
@@ -9253,15 +10007,15 @@ function DocumentViewer(props) {
           locale
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "main",
         {
           ref: mainRef,
           className: `hv-main${isRichTextAuthoringMode ? " hv-main-richtext-authoring" : ""}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "hv-zoom-shell", style: zoomShellStyle, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: zoomStageRef, className: "hv-zoom-stage", style: zoomStageStyle, children: renderContent() }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "hv-zoom-shell", style: zoomShellStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: zoomStageRef, className: "hv-zoom-stage", style: zoomStageStyle, children: renderContent() }) })
         }
       ),
-      signingEnabled && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      signingEnabled && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         SignaturePanel,
         {
           isOpen: showSignatures,