@zerohive/hive-viewer 2.0.3 → 2.0.5

package/dist/index.mjs

@@ -11,7 +11,7 @@ import { MessageSquare } from "lucide-react";
 import { useEffect as useEffect2, useMemo, useRef, useState as useState2 } from "react";
 
 // src/components/RenderableSignatureImage.tsx
-import { useEffect, useState } from "react";
+import { memo, useEffect, useState } from "react";
 
 // src/utils/signature.ts
 var SIGNATURE_INK_COLORS = [
@@ -93,7 +93,8 @@ function normalizeSignaturePlacement(placement) {
 }
 
 // src/utils/signatureImage.ts
-var processedSignatureCache = /* @__PURE__ */ new Map();
+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:")) {
@@ -141,6 +142,12 @@ function colorDistance(leftRed, leftGreen, leftBlue, rightRed, rightGreen, right
     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;
@@ -152,7 +159,10 @@ function hasMeaningfulTransparency(pixels) {
   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 sampleRadius = Math.max(
+    2,
+    Math.min(12, Math.floor(Math.min(width, height) / 12))
+  );
   const sampleOrigins = [
     [0, 0],
     [Math.max(0, width - sampleRadius), 0],
@@ -216,56 +226,98 @@ function detectUniformBackground(pixels, width, height) {
   }, 0);
   return maxDistance <= 26 ? background : null;
 }
-function createTintedSignatureFromAlpha(pixels, width, height, inkColor) {
-  const canvas = createCanvas(width, height);
-  const context = canvas.getContext("2d");
-  if (!context) {
-    return null;
+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);
+    }
   }
-  const output = context.createImageData(width, height);
-  for (let offset = 0; offset < pixels.length; offset += 4) {
-    output.data[offset] = inkColor[0];
-    output.data[offset + 1] = inkColor[1];
-    output.data[offset + 2] = inkColor[2];
-    output.data[offset + 3] = pixels[offset + 3];
+  if (maxX < minX || maxY < minY) {
+    return { sx: 0, sy: 0, sw: width, sh: height };
   }
-  context.putImageData(output, 0, 0);
-  return canvas;
+  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 createTintedSignatureFromSolidBackground(pixels, width, height, background, inkColor) {
-  const canvas = createCanvas(width, height);
-  const context = canvas.getContext("2d");
-  if (!context) {
-    return null;
+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];
   }
-  const output = context.createImageData(width, height);
+  return alphaMask;
+}
+function createAlphaMaskFromSolidBackground(pixels, width, height, background) {
+  const alphaMask = new Uint8ClampedArray(width * height);
   let foregroundPixels = 0;
-  const totalPixels = width * height;
-  for (let offset = 0; offset < pixels.length; offset += 4) {
+  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(
-      pixels[offset],
-      pixels[offset + 1],
-      pixels[offset + 2],
+      red,
+      green,
+      blue,
       background[0],
       background[1],
       background[2]
     );
-    const normalizedStrength = Math.max(0, Math.min(1, (distance - 14) / 120));
-    const outputAlpha = Math.round(normalizedStrength * alpha * 255);
-    output.data[offset] = inkColor[0];
-    output.data[offset + 1] = inkColor[1];
-    output.data[offset + 2] = inkColor[2];
-    output.data[offset + 3] = outputAlpha;
+    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);
     }
   }
-  if (foregroundPixels < Math.max(24, totalPixels * 15e-4) || foregroundPixels > totalPixels * 0.42) {
+  const totalPixels = width * height;
+  if (foregroundPixels < Math.max(24, totalPixels * 15e-4) || foregroundPixels > totalPixels * 0.42 || maxAlpha === 0) {
     return null;
   }
-  context.putImageData(output, 0, 0);
-  return canvas;
+  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];
@@ -275,62 +327,148 @@ function parseInkColor(inkColor) {
     Number.parseInt(hex.slice(5, 7), 16)
   ];
 }
-async function getRenderableSignatureImage(source, inkColor) {
+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 normalizedInkColor = normalizeSignatureInkColor(inkColor);
-  const cacheKey = `${normalizedInkColor}::${resolvedSource}`;
-  const cached = processedSignatureCache.get(cacheKey);
+  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 resolvedSource;
+      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 resolvedSource;
+      return {
+        source: resolvedSource,
+        width: image.width,
+        height: image.height,
+        alphaMask: null,
+        bounds: fallbackBounds
+      };
     }
-    const inkRgb = parseInkColor(normalizedInkColor);
-    const transparentRender = hasMeaningfulTransparency(imageData.data) ? createTintedSignatureFromAlpha(
-      imageData.data,
-      canvas.width,
-      canvas.height,
-      inkRgb
-    ) : null;
-    if (transparentRender) {
-      return transparentRender.toDataURL("image/png");
+    const 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
+      };
     }
-    const background = detectUniformBackground(
-      imageData.data,
-      canvas.width,
-      canvas.height
-    );
-    if (!background) {
-      return resolvedSource;
+    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 extractedRender = createTintedSignatureFromSolidBackground(
-      imageData.data,
-      canvas.width,
-      canvas.height,
-      background,
-      inkRgb
+    const tintedCanvas = createTintedSignatureCanvas(
+      alphaSource,
+      normalizedInkColor
     );
-    return extractedRender ? extractedRender.toDataURL("image/png") : resolvedSource;
+    return tintedCanvas ? tintedCanvas.toDataURL("image/png") : alphaSource.source;
   })().catch(() => resolvedSource);
-  processedSignatureCache.set(cacheKey, pending);
+  renderedSignatureCache.set(cacheKey, pending);
   return pending;
 }
 
 // src/components/RenderableSignatureImage.tsx
 import { jsx } from "react/jsx-runtime";
-function RenderableSignatureImage(props) {
+var RenderableSignatureImage = memo(function RenderableSignatureImage2(props) {
   const { signatureImageUrl, inkColor, ...imageProps } = props;
   const [resolvedSrc, setResolvedSrc] = useState(signatureImageUrl);
   useEffect(() => {
@@ -349,25 +487,54 @@ function RenderableSignatureImage(props) {
     };
   }, [inkColor, signatureImageUrl]);
   return /* @__PURE__ */ jsx("img", { ...imageProps, src: resolvedSrc, decoding: "async", draggable: false });
-}
+});
+RenderableSignatureImage.displayName = "RenderableSignatureImage";
 
 // src/components/SignatureOverlay.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var DEFAULT_SIGNATURE_ASPECT_RATIO = 3.1;
 function clamp(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
-function getDefaultPlacementSize(kind) {
+function clampAspectRatio(value) {
+  return clamp(value, 1.8, 6.2);
+}
+function getDefaultSurfaceAspectRatio(kind) {
   switch (kind) {
-    case "sheet":
-      return { width: 0.3, height: 0.16 };
     case "slide":
-      return { width: 0.34, height: 0.18 };
+      return 16 / 9;
+    case "sheet":
+      return 1.9;
     case "image":
-      return { width: 0.36, height: 0.18 };
+      return 1;
     default:
-      return { width: 0.34, height: 0.16 };
+      return 816 / 1056;
   }
 }
+function getSignatureCardAspectRatio(aspectRatio = DEFAULT_SIGNATURE_ASPECT_RATIO) {
+  return clamp(aspectRatio * 0.78, 1.35, 4.8);
+}
+function getDefaultPlacementSize(kind, aspectRatio = DEFAULT_SIGNATURE_ASPECT_RATIO, surfaceAspectRatio = getDefaultSurfaceAspectRatio(kind)) {
+  const effectiveAspectRatio = getSignatureCardAspectRatio(
+    clampAspectRatio(aspectRatio)
+  );
+  const effectiveSurfaceAspectRatio = clamp(surfaceAspectRatio, 0.45, 2.8);
+  const heightTarget = kind === "sheet" ? 0.11 : kind === "slide" ? 0.135 : kind === "image" ? 0.14 : 0.115;
+  const widthMin = kind === "sheet" ? 0.2 : kind === "slide" ? 0.22 : kind === "image" ? 0.24 : 0.22;
+  const widthMax = kind === "sheet" ? 0.38 : kind === "slide" ? 0.44 : kind === "image" ? 0.48 : 0.4;
+  const heightMax = kind === "sheet" ? 0.18 : kind === "slide" ? 0.2 : kind === "image" ? 0.22 : 0.19;
+  const width = clamp(
+    heightTarget * effectiveAspectRatio / effectiveSurfaceAspectRatio,
+    widthMin,
+    widthMax
+  );
+  const height = clamp(
+    width * effectiveSurfaceAspectRatio / effectiveAspectRatio,
+    0.075,
+    heightMax
+  );
+  return { width, height };
+}
 function getDefaultAnnotationSize(kind) {
   switch (kind) {
     case "sheet":
@@ -395,11 +562,13 @@ function SignatureOverlay(props) {
     placements,
     annotations,
     pendingSignature,
+    pendingSignatureColor,
     pendingAnnotation,
     activePlacementId,
     activeAnnotationId,
     placeHint,
     annotationHint,
+    cancelPlacementLabel,
     annotationPlaceholder,
     signatureAltLabel,
     signatureAltByLabel,
@@ -419,10 +588,21 @@ function SignatureOverlay(props) {
     onRemovePlacement,
     onRemoveAnnotation,
     onSelectPlacement,
-    onSelectAnnotation
+    onSelectAnnotation,
+    onCancelPlacementMode
   } = props;
   const layerRef = useRef(null);
   const [dragState, setDragState] = useState2(null);
+  const [dragPreview, setDragPreview] = useState2(null);
+  const [placementPreview, setPlacementPreview] = useState2(
+    null
+  );
+  const [pendingSignatureAspectRatio, setPendingSignatureAspectRatio] = useState2(
+    DEFAULT_SIGNATURE_ASPECT_RATIO
+  );
+  const [surfaceAspectRatio, setSurfaceAspectRatio] = useState2(
+    () => getDefaultSurfaceAspectRatio(surfaceKind)
+  );
   const visiblePlacements = useMemo(
     () => placements.filter((placement) => placement.surfaceKey === surfaceKey),
     [placements, surfaceKey]
@@ -436,6 +616,105 @@ function SignatureOverlay(props) {
     [visibleAnnotations]
   );
   const captureMode = pendingSignature ? "signature" : pendingAnnotation ? "annotation" : null;
+  const defaultSignatureSize = useMemo(
+    () => getDefaultPlacementSize(
+      surfaceKind,
+      pendingSignatureAspectRatio,
+      surfaceAspectRatio
+    ),
+    [pendingSignatureAspectRatio, surfaceAspectRatio, surfaceKind]
+  );
+  const defaultAnnotationSize = useMemo(
+    () => getDefaultAnnotationSize(surfaceKind),
+    [surfaceKind]
+  );
+  const previewGeometry = useMemo(() => {
+    if (!placementPreview || !captureMode) {
+      return null;
+    }
+    const size = captureMode === "signature" ? defaultSignatureSize : defaultAnnotationSize;
+    return {
+      width: size.width,
+      height: size.height,
+      x: clamp(placementPreview.x - size.width / 2, 0, 1 - size.width),
+      y: clamp(placementPreview.y - size.height / 2, 0, 1 - size.height)
+    };
+  }, [
+    captureMode,
+    defaultAnnotationSize,
+    defaultSignatureSize,
+    placementPreview
+  ]);
+  useEffect2(() => {
+    const element = layerRef.current;
+    if (!element) {
+      return;
+    }
+    const syncSurfaceAspectRatio = () => {
+      const rect = element.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) {
+        return;
+      }
+      const nextAspectRatio = rect.width / rect.height;
+      setSurfaceAspectRatio(
+        (current) => Math.abs(current - nextAspectRatio) < 1e-3 ? current : nextAspectRatio
+      );
+    };
+    syncSurfaceAspectRatio();
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver(() => {
+      syncSurfaceAspectRatio();
+    });
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [surfaceKey, surfaceKind]);
+  useEffect2(() => {
+    if (!pendingSignature?.signatureImageUrl) {
+      setPendingSignatureAspectRatio(DEFAULT_SIGNATURE_ASPECT_RATIO);
+      return;
+    }
+    let cancelled = false;
+    void getSignatureRenderMetrics(pendingSignature.signatureImageUrl).then((metrics) => {
+      if (!cancelled) {
+        setPendingSignatureAspectRatio(
+          clampAspectRatio(metrics.aspectRatio || DEFAULT_SIGNATURE_ASPECT_RATIO)
+        );
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setPendingSignatureAspectRatio(DEFAULT_SIGNATURE_ASPECT_RATIO);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [pendingSignature?.signatureImageUrl]);
+  useEffect2(() => {
+    if (!captureMode) {
+      setPlacementPreview(null);
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      event.preventDefault();
+      onCancelPlacementMode();
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [captureMode, onCancelPlacementMode]);
+  useEffect2(() => {
+    if (!dragState) {
+      setDragPreview(null);
+    }
+  }, [dragState]);
   useEffect2(() => {
     if (captureMode || dragState) {
       return;
@@ -474,11 +753,12 @@ function SignatureOverlay(props) {
           0,
           1 - dragState.originHeight
         );
-        if (dragState.targetType === "signature") {
-          onUpdatePlacement(dragState.id, { x: nextX, y: nextY });
-          return;
-        }
-        onUpdateAnnotation(dragState.id, { x: nextX, y: nextY });
+        setDragPreview({
+          x: nextX,
+          y: nextY,
+          width: dragState.originWidth,
+          height: dragState.originHeight
+        });
         return;
       }
       if (dragState.targetType === "signature") {
@@ -492,7 +772,9 @@ function SignatureOverlay(props) {
           0.035,
           1 - dragState.originY
         );
-        onUpdatePlacement(dragState.id, {
+        setDragPreview({
+          x: dragState.originX,
+          y: dragState.originY,
           width: nextWidth2,
           height: nextHeight2
         });
@@ -508,12 +790,22 @@ function SignatureOverlay(props) {
         0.08,
         1 - dragState.originY
       );
-      onUpdateAnnotation(dragState.id, {
+      setDragPreview({
+        x: dragState.originX,
+        y: dragState.originY,
         width: nextWidth,
         height: nextHeight
       });
     };
     const handlePointerUp = () => {
+      if (dragPreview) {
+        if (dragState.targetType === "signature") {
+          onUpdatePlacement(dragState.id, dragPreview);
+        } else {
+          onUpdateAnnotation(dragState.id, dragPreview);
+        }
+      }
+      setDragPreview(null);
       setDragState(null);
     };
     window.addEventListener("pointermove", handlePointerMove);
@@ -522,7 +814,7 @@ function SignatureOverlay(props) {
       window.removeEventListener("pointermove", handlePointerMove);
       window.removeEventListener("pointerup", handlePointerUp);
     };
-  }, [dragState, onUpdateAnnotation, onUpdatePlacement]);
+  }, [dragPreview, dragState, onUpdateAnnotation, onUpdatePlacement]);
   const handlePlace = (event) => {
     if (!layerRef.current || !captureMode) {
       return;
@@ -531,7 +823,7 @@ function SignatureOverlay(props) {
     const clickX = (event.clientX - rect.left) / rect.width;
     const clickY = (event.clientY - rect.top) / rect.height;
     if (captureMode === "signature" && pendingSignature) {
-      const { width, height } = getDefaultPlacementSize(surfaceKind);
+      const { width, height } = defaultSignatureSize;
       onPlaceSignature({
         signature: pendingSignature,
         surfaceKey,
@@ -547,7 +839,7 @@ function SignatureOverlay(props) {
       return;
     }
     if (captureMode === "annotation") {
-      const { width, height } = getDefaultAnnotationSize(surfaceKind);
+      const { width, height } = defaultAnnotationSize;
       onPlaceAnnotation({
         surfaceKey,
         surfaceKind,
@@ -562,6 +854,16 @@ function SignatureOverlay(props) {
       });
     }
   };
+  const updatePlacementPreview = (clientX, clientY) => {
+    if (!layerRef.current) {
+      return;
+    }
+    const rect = layerRef.current.getBoundingClientRect();
+    setPlacementPreview({
+      x: clamp((clientX - rect.left) / rect.width, 0, 1),
+      y: clamp((clientY - rect.top) / rect.height, 0, 1)
+    });
+  };
   const beginDrag = (event, target, mode) => {
     if (!layerRef.current) {
       return;
@@ -571,6 +873,7 @@ function SignatureOverlay(props) {
     if (target.kind === "signature") {
       onSelectPlacement(target.item.id);
       onSelectAnnotation(null);
+      setDragPreview(null);
       setDragState({
         id: target.item.id,
         targetType: "signature",
@@ -588,6 +891,7 @@ function SignatureOverlay(props) {
     }
     onSelectAnnotation(target.item.id);
     onSelectPlacement(null);
+    setDragPreview(null);
     setDragState({
       id: target.item.id,
       targetType: "annotation",
@@ -601,9 +905,110 @@ function SignatureOverlay(props) {
       rect: layerRef.current.getBoundingClientRect()
     });
   };
+  const getSignatureGeometry = (placement) => dragState?.targetType === "signature" && dragState.id === placement.id && dragPreview ? dragPreview : {
+    x: placement.x,
+    y: placement.y,
+    width: placement.width,
+    height: placement.height
+  };
+  const getAnnotationGeometry = (annotation) => dragState?.targetType === "annotation" && dragState.id === annotation.id && dragPreview ? dragPreview : {
+    x: annotation.x,
+    y: annotation.y,
+    width: annotation.width,
+    height: annotation.height
+  };
   return /* @__PURE__ */ jsxs("div", { ref: layerRef, className: "hv-signature-overlay", children: [
-    captureMode && /* @__PURE__ */ jsx2("div", { className: "hv-signature-overlay-capture", onClick: handlePlace, children: /* @__PURE__ */ jsx2("div", { className: "hv-signature-overlay-hint", children: captureMode === "annotation" ? annotationHint : placeHint }) }),
+    captureMode && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "hv-signature-overlay-capture",
+        onClick: handlePlace,
+        onPointerEnter: (event) => updatePlacementPreview(event.clientX, event.clientY),
+        onPointerMove: (event) => updatePlacementPreview(event.clientX, event.clientY),
+        onPointerLeave: () => setPlacementPreview(null),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "hv-signature-overlay-banner",
+              onPointerDown: (event) => {
+                event.stopPropagation();
+              },
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { className: "hv-signature-overlay-banner-copy", children: [
+                  /* @__PURE__ */ jsx2("strong", { className: "hv-signature-overlay-title", children: captureMode === "annotation" ? annotationTitle : signatureAltLabel }),
+                  /* @__PURE__ */ jsx2("span", { className: "hv-signature-overlay-hint", children: captureMode === "annotation" ? annotationHint : placeHint })
+                ] }),
+                /* @__PURE__ */ jsx2(
+                  "button",
+                  {
+                    type: "button",
+                    className: "hv-signature-overlay-cancel",
+                    onPointerDown: (event) => {
+                      event.stopPropagation();
+                    },
+                    onClick: (event) => {
+                      event.stopPropagation();
+                      onCancelPlacementMode();
+                    },
+                    children: cancelPlacementLabel
+                  }
+                )
+              ]
+            }
+          ),
+          captureMode === "signature" && previewGeometry && pendingSignature && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "hv-signature-stamp hv-signature-ghost",
+              style: {
+                left: `${previewGeometry.x * 100}%`,
+                top: `${previewGeometry.y * 100}%`,
+                width: `${previewGeometry.width * 100}%`,
+                height: `${previewGeometry.height * 100}%`
+              },
+              children: [
+                /* @__PURE__ */ jsx2("div", { className: "hv-signature-image-wrap", children: /* @__PURE__ */ jsx2(
+                  RenderableSignatureImage,
+                  {
+                    signatureImageUrl: pendingSignature.signatureImageUrl,
+                    inkColor: pendingSignatureColor,
+                    alt: signatureAltLabel,
+                    className: "hv-signature-image"
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { className: "hv-signature-meta", children: [
+                  pendingSignature.signedBy?.trim() && /* @__PURE__ */ jsx2("span", { className: "hv-signature-meta-name", children: pendingSignature.signedBy.trim() }),
+                  pendingSignature.jobTitle?.trim() && /* @__PURE__ */ jsx2("span", { className: "hv-signature-meta-jobtitle", children: pendingSignature.jobTitle.trim() }),
+                  /* @__PURE__ */ jsx2("span", { className: "hv-signature-meta-date", children: normalizeSignatureDate(pendingSignature.dateSigned) })
+                ] })
+              ]
+            }
+          ),
+          captureMode === "annotation" && previewGeometry && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "hv-annotation-card hv-annotation-ghost",
+              style: {
+                left: `${previewGeometry.x * 100}%`,
+                top: `${previewGeometry.y * 100}%`,
+                width: `${previewGeometry.width * 100}%`,
+                height: `${previewGeometry.height * 100}%`
+              },
+              children: [
+                /* @__PURE__ */ jsx2("div", { className: "hv-annotation-header", children: /* @__PURE__ */ jsx2("div", { className: "hv-annotation-header-copy", children: /* @__PURE__ */ jsx2("span", { className: "hv-annotation-title", children: annotationTitle }) }) }),
+                /* @__PURE__ */ jsx2("div", { className: "hv-annotation-body", children: /* @__PURE__ */ jsx2("div", { className: "hv-annotation-preview empty", children: annotationPlaceholder }) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
     visiblePlacements.map((placement) => {
+      const placementGeometry = getSignatureGeometry(placement);
       const isActive = placement.id === activePlacementId;
       const hasLinkedAnnotation = linkedAnnotationIds.has(placement.id);
       const signer = placement.signature.signedBy?.trim();
@@ -615,20 +1020,12 @@ function SignatureOverlay(props) {
         {
           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);
@@ -710,6 +1107,7 @@ 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;
@@ -720,8 +1118,8 @@ function SignatureOverlay(props) {
             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,
@@ -740,10 +1138,10 @@ function SignatureOverlay(props) {
         {
           className: `hv-annotation-card ${isActive ? "active" : ""} ${isLinked ? "linked" : ""}`,
           style: {
-            left: `${annotation.x * 100}%`,
-            top: `${annotation.y * 100}%`,
-            width: `${annotation.width * 100}%`,
-            height: `${annotation.height * 100}%`
+            left: `${annotationGeometry.x * 100}%`,
+            top: `${annotationGeometry.y * 100}%`,
+            width: `${annotationGeometry.width * 100}%`,
+            height: `${annotationGeometry.height * 100}%`
           },
           onClick: (event) => {
             event.stopPropagation();
@@ -5156,11 +5554,13 @@ function RichTextEditor(props) {
                       placements: props.signatureOverlay.placements,
                       annotations: props.signatureOverlay.annotations,
                       pendingSignature: props.signatureOverlay.pendingSignature,
+                      pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
                       pendingAnnotation: props.signatureOverlay.pendingAnnotation,
                       activePlacementId: props.signatureOverlay.activePlacementId,
                       activeAnnotationId: props.signatureOverlay.activeAnnotationId,
                       placeHint: props.signatureOverlay.placeHint,
                       annotationHint: props.signatureOverlay.annotationHint,
+                      cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
                       annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
                       signatureAltLabel: props.signatureOverlay.signatureAltLabel,
                       signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -5180,7 +5580,8 @@ function RichTextEditor(props) {
                       onRemovePlacement: props.signatureOverlay.onRemovePlacement,
                       onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
                       onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-                      onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+                      onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+                      onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
                     }
                   )
                 ]
@@ -5219,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,
@@ -5243,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
           }
         )
       ] }) })
@@ -5290,11 +5694,13 @@ function RichTextEditor(props) {
                       placements: props.signatureOverlay.placements,
                       annotations: props.signatureOverlay.annotations,
                       pendingSignature: props.signatureOverlay.pendingSignature,
+                      pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
                       pendingAnnotation: props.signatureOverlay.pendingAnnotation,
                       activePlacementId: props.signatureOverlay.activePlacementId,
                       activeAnnotationId: props.signatureOverlay.activeAnnotationId,
                       placeHint: props.signatureOverlay.placeHint,
                       annotationHint: props.signatureOverlay.annotationHint,
+                      cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
                       annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
                       signatureAltLabel: props.signatureOverlay.signatureAltLabel,
                       signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -5314,7 +5720,8 @@ function RichTextEditor(props) {
                       onRemovePlacement: props.signatureOverlay.onRemovePlacement,
                       onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
                       onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-                      onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+                      onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+                      onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
                     }
                   )
                 ]
@@ -5860,11 +6267,13 @@ function RichTextEditor(props) {
           placements: props.signatureOverlay.placements,
           annotations: props.signatureOverlay.annotations,
           pendingSignature: props.signatureOverlay.pendingSignature,
+          pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
           pendingAnnotation: props.signatureOverlay.pendingAnnotation,
           activePlacementId: props.signatureOverlay.activePlacementId,
           activeAnnotationId: props.signatureOverlay.activeAnnotationId,
           placeHint: props.signatureOverlay.placeHint,
           annotationHint: props.signatureOverlay.annotationHint,
+          cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
           annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
           signatureAltLabel: props.signatureOverlay.signatureAltLabel,
           signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -5884,7 +6293,8 @@ function RichTextEditor(props) {
           onRemovePlacement: props.signatureOverlay.onRemovePlacement,
           onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
           onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+          onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
         }
       )
     ] }) })
@@ -6770,11 +7180,13 @@ function SpreadsheetEditor(props) {
           placements: props.signatureOverlay.placements,
           annotations: props.signatureOverlay.annotations,
           pendingSignature: props.signatureOverlay.pendingSignature,
+          pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
           pendingAnnotation: props.signatureOverlay.pendingAnnotation,
           activePlacementId: props.signatureOverlay.activePlacementId,
           activeAnnotationId: props.signatureOverlay.activeAnnotationId,
           placeHint: props.signatureOverlay.placeHint,
           annotationHint: props.signatureOverlay.annotationHint,
+          cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
           annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
           signatureAltLabel: props.signatureOverlay.signatureAltLabel,
           signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -6794,7 +7206,8 @@ function SpreadsheetEditor(props) {
           onRemovePlacement: props.signatureOverlay.onRemovePlacement,
           onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
           onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+          onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
         }
       )
     ] }) })
@@ -6832,11 +7245,13 @@ function ImageRenderer(props) {
         placements: props.signatureOverlay.placements,
         annotations: props.signatureOverlay.annotations,
         pendingSignature: props.signatureOverlay.pendingSignature,
+        pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
         pendingAnnotation: props.signatureOverlay.pendingAnnotation,
         activePlacementId: props.signatureOverlay.activePlacementId,
         activeAnnotationId: props.signatureOverlay.activeAnnotationId,
         placeHint: props.signatureOverlay.placeHint,
         annotationHint: props.signatureOverlay.annotationHint,
+        cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
         annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
         signatureAltLabel: props.signatureOverlay.signatureAltLabel,
         signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -6856,7 +7271,8 @@ function ImageRenderer(props) {
         onRemovePlacement: props.signatureOverlay.onRemovePlacement,
         onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
         onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-        onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+        onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+        onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
       }
     )
   ] }) });
@@ -7045,11 +7461,13 @@ function PdfPage({
             placements: signatureOverlay.placements,
             annotations: signatureOverlay.annotations,
             pendingSignature: signatureOverlay.pendingSignature,
+            pendingSignatureColor: signatureOverlay.pendingSignatureColor,
             pendingAnnotation: signatureOverlay.pendingAnnotation,
             activePlacementId: signatureOverlay.activePlacementId,
             activeAnnotationId: signatureOverlay.activeAnnotationId,
             placeHint: signatureOverlay.placeHint,
             annotationHint: signatureOverlay.annotationHint,
+            cancelPlacementLabel: signatureOverlay.cancelPlacementLabel,
             annotationPlaceholder: signatureOverlay.annotationPlaceholder,
             signatureAltLabel: signatureOverlay.signatureAltLabel,
             signatureAltByLabel: signatureOverlay.signatureAltByLabel,
@@ -7069,7 +7487,8 @@ function PdfPage({
             onRemovePlacement: signatureOverlay.onRemovePlacement,
             onRemoveAnnotation: signatureOverlay.onRemoveAnnotation,
             onSelectPlacement: signatureOverlay.onSelectPlacement,
-            onSelectAnnotation: signatureOverlay.onSelectAnnotation
+            onSelectAnnotation: signatureOverlay.onSelectAnnotation,
+            onCancelPlacementMode: signatureOverlay.onCancelPlacementMode
           }
         )
       ]
@@ -7568,11 +7987,13 @@ function PptxRenderer(props) {
                           placements: props.signatureOverlay.placements,
                           annotations: props.signatureOverlay.annotations,
                           pendingSignature: props.signatureOverlay.pendingSignature,
+                          pendingSignatureColor: props.signatureOverlay.pendingSignatureColor,
                           pendingAnnotation: props.signatureOverlay.pendingAnnotation,
                           activePlacementId: props.signatureOverlay.activePlacementId,
                           activeAnnotationId: props.signatureOverlay.activeAnnotationId,
                           placeHint: props.signatureOverlay.placeHint,
                           annotationHint: props.signatureOverlay.annotationHint,
+                          cancelPlacementLabel: props.signatureOverlay.cancelPlacementLabel,
                           annotationPlaceholder: props.signatureOverlay.annotationPlaceholder,
                           signatureAltLabel: props.signatureOverlay.signatureAltLabel,
                           signatureAltByLabel: props.signatureOverlay.signatureAltByLabel,
@@ -7592,7 +8013,8 @@ function PptxRenderer(props) {
                           onRemovePlacement: props.signatureOverlay.onRemovePlacement,
                           onRemoveAnnotation: props.signatureOverlay.onRemoveAnnotation,
                           onSelectPlacement: props.signatureOverlay.onSelectPlacement,
-                          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation
+                          onSelectAnnotation: props.signatureOverlay.onSelectAnnotation,
+                          onCancelPlacementMode: props.signatureOverlay.onCancelPlacementMode
                         }
                       )
                     ]
@@ -7630,13 +8052,13 @@ var defaultLocale = {
   "signatures.title": "Signatures",
   "signatures.empty": "No signatures",
   "signatures.new": "New Signature",
-  "signatures.ready": "Ready to place",
+  "signatures.ready": "Placement mode active",
   "signatures.cancelPlacement": "Cancel placement",
   "signatures.drawTitle": "Draw Signature",
   "signatures.drawHelp": "Sign above using your mouse or finger",
   "signatures.clear": "Clear",
   "signatures.createAndUse": "Create & Use",
-  "signatures.placeHint": "Click on the document surface to place the signature.",
+  "signatures.placeHint": "Move your pointer to preview the signature, click to place it, then drag to reposition. Press Esc to cancel.",
   "signatures.alt": "Signature",
   "signatures.altBy": "Signature by",
   "signatures.noteIndicator": "Note",
@@ -7646,7 +8068,7 @@ var defaultLocale = {
   "signatures.color.blue": "Blue",
   "signatures.color.red": "Red",
   "signatures.color.green": "Green",
-  "annotations.placeHint": "Click on the document surface to place an annotation.",
+  "annotations.placeHint": "Move your pointer to preview the note, click to place it, then drag to reposition. Press Esc to cancel.",
   "annotations.placeholder": "Add instruction or review note...",
   "annotations.title": "Annotation",
   "annotations.linkedTitle": "Signature Note",
@@ -8669,6 +9091,7 @@ function getFileNameHint(fileUrl, fileName) {
 function DocumentViewer(props) {
   const mode = props.mode ?? "view";
   const theme = props.theme ?? "light";
+  const externalLoading = props.loading ?? false;
   const locale = useMemo9(
     () => ({ ...defaultLocale, ...props.locale }),
     [props.locale]
@@ -8818,6 +9241,12 @@ function DocumentViewer(props) {
     let active = true;
     let cleanupSource;
     const loadFile = async () => {
+      if (externalLoading) {
+        setLoading(true);
+        setError("");
+        setResolved(null);
+        return;
+      }
       setLoading(true);
       setError("");
       setResolved(null);
@@ -8863,6 +9292,7 @@ function DocumentViewer(props) {
       cleanupSource?.();
     };
   }, [
+    externalLoading,
     hasIncomingSource,
     isRequestedCreateUnsupported,
     mode,
@@ -9024,12 +9454,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(),
@@ -9048,8 +9483,7 @@ function DocumentViewer(props) {
     });
     updatePlacements((prev) => [...prev, nextPlacement]);
     setSelectedSignature(null);
-    setSelectedSignatureColor("black");
-    setActivePlacementId(null);
+    setActivePlacementId(nextPlacement.id);
     setActiveAnnotationId(null);
   };
   const handlePlaceAnnotation = (annotation) => {
@@ -9099,11 +9533,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"],
@@ -9130,15 +9566,20 @@ function DocumentViewer(props) {
     onSelectPlacement: (id) => {
       setActivePlacementId(id);
       if (id) {
+        setSelectedSignature(null);
+        setIsPlacingAnnotation(false);
         setActiveAnnotationId(null);
       }
     },
     onSelectAnnotation: (id) => {
       setActiveAnnotationId(id);
       if (id) {
+        setSelectedSignature(null);
+        setIsPlacingAnnotation(false);
         setActivePlacementId(null);
       }
-    }
+    },
+    onCancelPlacementMode: handleCancelPlacementMode
   };
   const saveReady = useMemo9(() => {
     if (!resolved) {