Merge branch 'V2' into feature/v2/saved-signatures

Show signature preview on hover
Place signature smaller (mkatch preview size)
Retain signature in modal on close/open
Clean up ui generally
Small bug fixes

frontend/public/locales/en-GB/translation.json

@@ -2134,13 +2134,54 @@
       "title": "Draw your signature",
       "clear": "Clear"
     },
+    "canvas": {
+      "heading": "Draw your signature",
+      "clickToOpen": "Click to open the drawing canvas",
+      "modalTitle": "Draw your signature",
+      "colorLabel": "Colour",
+      "penSizeLabel": "Pen size",
+      "penSizePlaceholder": "Size",
+      "clear": "Clear canvas",
+      "colorPickerTitle": "Choose stroke colour"
+    },
     "text": {
       "name": "Signer Name",
-      "placeholder": "Enter your full name"
+      "placeholder": "Enter your full name",
+      "fontLabel": "Font",
+      "fontSizeLabel": "Font size",
+      "fontSizePlaceholder": "Type or select font size (8-200)",
+      "colorLabel": "Text colour"
     },
     "clear": "Clear",
     "add": "Add",
-    "saved": "Saved Signatures",
+    "saved": {
+      "heading": "Saved signatures",
+      "description": "Reuse saved signatures at any time.",
+      "emptyTitle": "No saved signatures yet",
+      "emptyDescription": "Draw, upload, or type a signature above, then use \"Save to library\" to keep up to {{max}} favourites ready to use.",
+      "type": {
+        "canvas": "Drawing",
+        "image": "Upload",
+        "text": "Text"
+      },
+      "limitTitle": "Limit reached",
+      "limitDescription": "Remove a saved signature before adding new ones (max {{max}}).",
+      "carouselPosition": "{{current}} of {{total}}",
+      "prev": "Previous",
+      "next": "Next",
+      "delete": "Remove",
+      "label": "Label",
+      "defaultLabel": "Signature",
+      "defaultCanvasLabel": "Drawing signature",
+      "defaultImageLabel": "Uploaded signature",
+      "defaultTextLabel": "Typed signature",
+      "saveButton": "Save signature",
+      "saveUnavailable": "Create a signature first to save it.",
+      "noChanges": "Current signature is already saved.",
+      "status": {
+        "saved": "Saved"
+      }
+    },
     "save": "Save Signature",
     "applySignatures": "Apply Signatures",
     "personalSigs": "Personal Signatures",
@@ -2159,12 +2200,18 @@
     "steps": {
       "configure": "Configure Signature"
     },
+    "step": {
+      "createDesc": "Choose how you want to create the signature",
+      "place": "Place & save",
+      "placeDesc": "Position the signature on your PDF"
+    },
     "type": {
       "title": "Signature Type",
       "draw": "Draw",
       "canvas": "Canvas",
       "image": "Image",
-      "text": "Text"
+      "text": "Text",
+      "saved": "Saved"
     },
     "image": {
       "label": "Upload signature image",
@@ -2175,11 +2222,17 @@
       "title": "How to add signature",
       "canvas": "After drawing your signature in the canvas, close the modal then click anywhere on the PDF to place it.",
       "image": "After uploading your signature image above, click anywhere on the PDF to place it.",
-      "text": "After entering your name above, click anywhere on the PDF to place your signature."
+      "saved": "Select a saved signature above, then click anywhere on the PDF to place it.",
+      "text": "After entering your name above, click anywhere on the PDF to place your signature.",
+      "paused": "Placement paused",
+      "resumeHint": "Resume placement to click and add your signature.",
+      "noSignature": "Create a signature above to enable placement tools."
     },
     "mode": {
       "move": "Move Signature",
-      "place": "Place Signature"
+      "place": "Place Signature",
+      "pause": "Pause placement",
+      "resume": "Resume placement"
     },
     "updateAndPlace": "Update and Place",
     "activate": "Activate Signature Placement",
@@ -4778,6 +4831,9 @@
       "processImagesDesc": "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images."
     }
   },
+  "colorPicker": {
+    "title": "Choose colour"
+  },
   "common": {
     "previous": "Previous",
     "next": "Next",
@@ -4793,7 +4849,8 @@
     "used": "used",
     "available": "available",
     "cancel": "Cancel",
-    "preview": "Preview"
+    "preview": "Preview",
+    "done": "Done"
   },
   "config": {
     "overview": {

frontend/src/core/components/annotation/shared/BaseAnnotationTool.tsx

@@ -1,9 +1,10 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Stack, Alert, Text } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
 import { DrawingControls } from '@app/components/annotation/shared/DrawingControls';
 import { ColorPicker } from '@app/components/annotation/shared/ColorPicker';
 import { usePDFAnnotation } from '@app/components/annotation/providers/PDFAnnotationProvider';
+import { useSignature } from '@app/contexts/SignatureContext';
 
 export interface AnnotationToolConfig {
   enableDrawing?: boolean;
@@ -32,10 +33,34 @@ export const BaseAnnotationTool: React.FC<BaseAnnotationToolProps> = ({
     undo,
     redo
   } = usePDFAnnotation();
+  const { historyApiRef } = useSignature();
 
   const [selectedColor, setSelectedColor] = useState('#000000');
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
   const [signatureData, setSignatureData] = useState<string | null>(null);
+  const [historyAvailability, setHistoryAvailability] = useState({ canUndo: false, canRedo: false });
+  const historyApiInstance = historyApiRef.current;
+
+  useEffect(() => {
+    if (!historyApiInstance) {
+      setHistoryAvailability({ canUndo: false, canRedo: false });
+      return;
+    }
+
+    const updateAvailability = () => {
+      setHistoryAvailability({
+        canUndo: historyApiInstance.canUndo?.() ?? false,
+        canRedo: historyApiInstance.canRedo?.() ?? false,
+      });
+    };
+
+    const unsubscribe = historyApiInstance.subscribe?.(updateAvailability);
+    updateAvailability();
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [historyApiInstance]);
 
   const handleSignatureDataChange = (data: string | null) => {
     setSignatureData(data);
@@ -54,6 +79,8 @@ export const BaseAnnotationTool: React.FC<BaseAnnotationToolProps> = ({
       <DrawingControls
         onUndo={undo}
         onRedo={redo}
+        canUndo={historyAvailability.canUndo}
+        canRedo={historyAvailability.canRedo}
         onPlaceSignature={config.showPlaceButton ? handlePlaceSignature : undefined}
         hasSignatureData={!!signatureData}
         disabled={disabled}
@@ -86,4 +113,4 @@ export const BaseAnnotationTool: React.FC<BaseAnnotationToolProps> = ({
       />
     </Stack>
   );
-};
+};

frontend/src/core/components/annotation/shared/ColorPicker.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Modal, Stack, ColorPicker as MantineColorPicker, Group, Button, ColorSwatch } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
 
 interface ColorPickerProps {
   isOpen: boolean;
@@ -14,13 +15,16 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   onClose,
   selectedColor,
   onColorChange,
-  title = "Choose Color"
+  title
 }) => {
+  const { t } = useTranslation();
+  const resolvedTitle = title ?? t('colorPicker.title', 'Choose colour');
+
   return (
     <Modal
       opened={isOpen}
       onClose={onClose}
-      title={title}
+      title={resolvedTitle}
       size="sm"
       centered
     >
@@ -36,7 +40,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
         />
         <Group justify="flex-end">
           <Button onClick={onClose}>
-            Done
+            {t('common.done', 'Done')}
           </Button>
         </Group>
       </Stack>
@@ -64,4 +68,4 @@ export const ColorSwatchButton: React.FC<ColorSwatchButtonProps> = ({
       onClick={onClick}
     />
   );
-};
+};

frontend/src/core/components/annotation/shared/DrawingCanvas.tsx

@@ -1,5 +1,6 @@
-import React, { useRef, useState } from 'react';
-import { Paper, Button, Modal, Stack, Text, Popover, ColorPicker as MantineColorPicker } from '@mantine/core';
+import React, { useEffect, useRef, useState } from 'react';
+import { Paper, Button, Modal, Stack, Text, Group } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
 import { ColorSwatchButton } from '@app/components/annotation/shared/ColorPicker';
 import PenSizeSelector from '@app/components/tools/sign/PenSizeSelector';
 import SignaturePad from 'signature_pad';
@@ -20,6 +21,7 @@ interface DrawingCanvasProps {
   modalWidth?: number;
   modalHeight?: number;
   additionalButtons?: React.ReactNode;
+  initialSignatureData?: string;
 }
 
 export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
@@ -34,12 +36,14 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
   disabled = false,
   width = 400,
   height = 150,
+  initialSignatureData,
 }) => {
+  const { t } = useTranslation();
   const previewCanvasRef = useRef<HTMLCanvasElement>(null);
   const modalCanvasRef = useRef<HTMLCanvasElement>(null);
   const padRef = useRef<SignaturePad | null>(null);
   const [modalOpen, setModalOpen] = useState(false);
-  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const [savedSignatureData, setSavedSignatureData] = useState<string | null>(null);
 
   const initPad = (canvas: HTMLCanvasElement) => {
     if (!padRef.current) {
@@ -55,6 +59,18 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
         minDistance: 5,
         velocityFilterWeight: 0.7,
       });
+
+      // Restore saved signature data if it exists
+      if (savedSignatureData) {
+        const img = new Image();
+        img.onload = () => {
+          const ctx = canvas.getContext('2d');
+          if (ctx) {
+            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+          }
+        };
+        img.src = savedSignatureData;
+      }
     }
   };
 
@@ -104,36 +120,35 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
     return trimmedCanvas.toDataURL('image/png');
   };
 
+  const renderPreview = (dataUrl: string) => {
+    const canvas = previewCanvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const img = new Image();
+    img.onload = () => {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const scale = Math.min(canvas.width / img.width, canvas.height / img.height);
+      const scaledWidth = img.width * scale;
+      const scaledHeight = img.height * scale;
+      const x = (canvas.width - scaledWidth) / 2;
+      const y = (canvas.height - scaledHeight) / 2;
+
+      ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
+    };
+    img.src = dataUrl;
+  };
+
   const closeModal = () => {
     if (padRef.current && !padRef.current.isEmpty()) {
       const canvas = modalCanvasRef.current;
       if (canvas) {
         const trimmedPng = trimCanvas(canvas);
+        const untrimmedPng = canvas.toDataURL('image/png');
+        setSavedSignatureData(untrimmedPng); // Save untrimmed for restoration
         onSignatureDataChange(trimmedPng);
-
-        // Update preview canvas with proper aspect ratio
-        const img = new Image();
-        img.onload = () => {
-          if (previewCanvasRef.current) {
-            const ctx = previewCanvasRef.current.getContext('2d');
-            if (ctx) {
-              ctx.clearRect(0, 0, previewCanvasRef.current.width, previewCanvasRef.current.height);
-
-              // Calculate scaling to fit within preview canvas while maintaining aspect ratio
-              const scale = Math.min(
-                previewCanvasRef.current.width / img.width,
-                previewCanvasRef.current.height / img.height
-              );
-              const scaledWidth = img.width * scale;
-              const scaledHeight = img.height * scale;
-              const x = (previewCanvasRef.current.width - scaledWidth) / 2;
-              const y = (previewCanvasRef.current.height - scaledHeight) / 2;
-
-              ctx.drawImage(img, x, y, scaledWidth, scaledHeight);
-            }
-          }
-        };
-        img.src = trimmedPng;
+        renderPreview(trimmedPng);
 
         if (onDrawingComplete) {
           onDrawingComplete();
@@ -157,6 +172,7 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
         ctx.clearRect(0, 0, previewCanvasRef.current.width, previewCanvasRef.current.height);
       }
     }
+    setSavedSignatureData(null); // Clear saved signature
     onSignatureDataChange(null);
   };
 
@@ -173,67 +189,73 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
     }
   };
 
+  useEffect(() => {
+    updatePenColor(selectedColor);
+  }, [selectedColor]);
+
+  useEffect(() => {
+    updatePenSize(penSize);
+  }, [penSize]);
+
+  useEffect(() => {
+    const canvas = previewCanvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    if (!initialSignatureData) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      setSavedSignatureData(null);
+
+      return;
+    }
+
+    renderPreview(initialSignatureData);
+    setSavedSignatureData(initialSignatureData);
+  }, [initialSignatureData]);
+
   return (
     <>
       <Paper withBorder p="md">
         <Stack gap="sm">
-          <Text fw={500}>Draw your signature</Text>
           <PrivateContent>
-            <canvas
-              ref={previewCanvasRef}
-              width={width}
-              height={height}
-              style={{
-                border: '1px solid #ccc',
-                borderRadius: '4px',
-                cursor: disabled ? 'default' : 'pointer',
-                backgroundColor: '#ffffff',
-                width: '100%',
-              }}
-              onClick={disabled ? undefined : openModal}
-            />
+          <Text fw={500}>{t('sign.canvas.heading', 'Draw your signature')}</Text>
+          <canvas
+            ref={previewCanvasRef}
+            width={width}
+            height={height}
+            style={{
+              border: '1px solid #ccc',
+              borderRadius: '4px',
+              cursor: disabled ? 'default' : 'pointer',
+              backgroundColor: '#ffffff',
+              width: '100%',
+            }}
+            onClick={disabled ? undefined : openModal}
+          />
           </PrivateContent>
           <Text size="sm" c="dimmed" ta="center">
-            Click to open drawing canvas
+            {t('sign.canvas.clickToOpen', 'Click to open the drawing canvas')}
           </Text>
         </Stack>
       </Paper>
 
-      <Modal opened={modalOpen} onClose={closeModal} title="Draw Your Signature" size="auto" centered>
+      <Modal opened={modalOpen} onClose={closeModal} title={t('sign.canvas.modalTitle', 'Draw your signature')} size="auto" centered>
         <Stack gap="md">
-          <div style={{ display: 'flex', gap: '20px', alignItems: 'flex-end' }}>
-            <div>
-              <Text size="sm" fw={500} mb="xs">Color</Text>
-              <Popover
-                opened={colorPickerOpen}
-                onChange={setColorPickerOpen}
-                position="bottom-start"
-                withArrow
-                withinPortal={false}
-              >
-                <Popover.Target>
-                  <div>
-                    <ColorSwatchButton
-                      color={selectedColor}
-                      onClick={() => setColorPickerOpen(!colorPickerOpen)}
-                    />
-                  </div>
-                </Popover.Target>
-                <Popover.Dropdown>
-                  <MantineColorPicker
-                    format="hex"
-                    value={selectedColor}
-                    onChange={(color) => {
-                      onColorSwatchClick();
-                      updatePenColor(color);
-                    }}
-                    swatches={['#000000', '#0066cc', '#cc0000', '#cc6600', '#009900', '#6600cc']}
-                  />
-                </Popover.Dropdown>
-              </Popover>
-            </div>
-            <div>
-              <Text size="sm" fw={500} mb="xs">Pen Size</Text>
+          <Group gap="lg" align="flex-end" wrap="wrap">
+            <Stack gap={4} style={{ minWidth: 120 }}>
+              <Text size="sm" fw={500}>
+                {t('sign.canvas.colorLabel', 'Colour')}
+              </Text>
+              <ColorSwatchButton
+                color={selectedColor}
+                onClick={onColorSwatchClick}
+              />
+            </Stack>
+            <Stack gap={4} style={{ minWidth: 120 }}>
+              <Text size="sm" fw={500}>
+                {t('sign.canvas.penSizeLabel', 'Pen size')}
+              </Text>
               <PenSizeSelector
                 value={penSize}
                 inputValue={penSizeInput}
@@ -242,12 +264,12 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
                   updatePenSize(size);
                 }}
                 onInputChange={onPenSizeInputChange}
-                placeholder="Size"
+                placeholder={t('sign.canvas.penSizePlaceholder', 'Size')}
                 size="compact-sm"
-                style={{ width: '60px' }}
+                style={{ width: '80px' }}
               />
-            </div>
-          </div>
+            </Stack>
+          </Group>
 
           <PrivateContent>
             <canvas
@@ -262,8 +284,8 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
                 touchAction: 'none',
                 backgroundColor: 'white',
                 width: '100%',
-                maxWidth: '800px',
-                height: '400px',
+                maxWidth: '50rem',
+                height: '25rem',
                 cursor: 'crosshair',
               }}
             />
@@ -271,10 +293,10 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
 
           <div style={{ display: 'flex', justifyContent: 'space-between' }}>
             <Button variant="subtle" color="red" onClick={clear}>
-              Clear Canvas
+              {t('sign.canvas.clear', 'Clear canvas')}
             </Button>
             <Button onClick={closeModal}>
-              Done
+              {t('common.done', 'Done')}
             </Button>
           </div>
         </Stack>

frontend/src/core/components/annotation/shared/DrawingControls.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { Group, Button } from '@mantine/core';
+import { Group, Button, ActionIcon, Tooltip } from '@mantine/core';
 import { useTranslation } from 'react-i18next';
+import { LocalIcon } from '@app/components/shared/LocalIcon';
 
 interface DrawingControlsProps {
   onUndo?: () => void;
@@ -8,8 +9,11 @@ interface DrawingControlsProps {
   onPlaceSignature?: () => void;
   hasSignatureData?: boolean;
   disabled?: boolean;
+  canUndo?: boolean;
+  canRedo?: boolean;
   showPlaceButton?: boolean;
   placeButtonText?: string;
+  additionalControls?: React.ReactNode;
 }
 
 export const DrawingControls: React.FC<DrawingControlsProps> = ({
@@ -18,30 +22,48 @@ export const DrawingControls: React.FC<DrawingControlsProps> = ({
   onPlaceSignature,
   hasSignatureData = false,
   disabled = false,
+  canUndo = true,
+  canRedo = true,
   showPlaceButton = true,
-  placeButtonText = "Update and Place"
+  placeButtonText = "Update and Place",
+  additionalControls,
 }) => {
   const { t } = useTranslation();
+  const undoDisabled = disabled || !canUndo;
+  const redoDisabled = disabled || !canRedo;
 
   return (
-    <Group gap="sm">
-      {/* Undo/Redo Controls */}
-      <Button
-        variant="outline"
-        onClick={onUndo}
-        disabled={disabled}
-        flex={1}
-      >
-        {t('sign.undo', 'Undo')}
-      </Button>
-      <Button
-        variant="outline"
-        onClick={onRedo}
-        disabled={disabled}
-        flex={1}
-      >
-        {t('sign.redo', 'Redo')}
-      </Button>
+    <Group gap="xs" wrap="nowrap" align="center">
+      {onUndo && (
+        <Tooltip label={t('sign.undo', 'Undo')}>
+          <ActionIcon
+            variant="subtle"
+            size="lg"
+            aria-label={t('sign.undo', 'Undo')}
+            onClick={onUndo}
+            disabled={undoDisabled}
+            color={undoDisabled ? 'gray' : 'blue'}
+          >
+            <LocalIcon icon="undo" width={20} height={20} style={{ color: 'currentColor' }} />
+          </ActionIcon>
+        </Tooltip>
+      )}
+      {onRedo && (
+        <Tooltip label={t('sign.redo', 'Redo')}>
+          <ActionIcon
+            variant="subtle"
+            size="lg"
+            aria-label={t('sign.redo', 'Redo')}
+            onClick={onRedo}
+            disabled={redoDisabled}
+            color={redoDisabled ? 'gray' : 'blue'}
+          >
+            <LocalIcon icon="redo" width={20} height={20} style={{ color: 'currentColor' }} />
+          </ActionIcon>
+        </Tooltip>
+      )}
+
+      {additionalControls}
 
       {/* Place Signature Button */}
       {showPlaceButton && onPlaceSignature && (
@@ -50,11 +72,11 @@ export const DrawingControls: React.FC<DrawingControlsProps> = ({
           color="blue"
           onClick={onPlaceSignature}
           disabled={disabled || !hasSignatureData}
-          flex={1}
+          ml="auto"
         >
           {placeButtonText}
         </Button>
       )}
     </Group>
   );
-};
+};

frontend/src/core/components/annotation/shared/TextInputWithFont.tsx

@@ -34,12 +34,18 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
   const [fontSizeInput, setFontSizeInput] = useState(fontSize.toString());
   const fontSizeCombobox = useCombobox();
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
+  const [colorInput, setColorInput] = useState(textColor);
 
   // Sync font size input with prop changes
   useEffect(() => {
     setFontSizeInput(fontSize.toString());
   }, [fontSize]);
 
+  // Sync color input with prop changes
+  useEffect(() => {
+    setColorInput(textColor);
+  }, [textColor]);
+
   const fontOptions = [
     { value: 'Helvetica', label: 'Helvetica' },
     { value: 'Times-Roman', label: 'Times' },
@@ -50,10 +56,15 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
 
   const fontSizeOptions = ['8', '12', '16', '20', '24', '28', '32', '36', '40', '48', '56', '64', '72', '80', '96', '112', '128', '144', '160', '176', '192', '200'];
 
+  // Validate hex color
+  const isValidHexColor = (color: string): boolean => {
+    return /^#[0-9A-Fa-f]{6}$/.test(color);
+  };
+
   return (
     <Stack gap="sm">
       <TextInput
-        label={label || t('sign.text.name', 'Signer Name')}
+        label={label || t('sign.text.name', 'Signer name')}
         placeholder={placeholder || t('sign.text.placeholder', 'Enter your full name')}
         value={text}
         onChange={(e) => onTextChange(e.target.value)}
@@ -63,7 +74,7 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
 
       {/* Font Selection */}
       <Select
-        label="Font"
+        label={t('sign.text.fontLabel', 'Font')}
         value={fontFamily}
         onChange={(value) => onFontFamilyChange(value || 'Helvetica')}
         data={fontOptions}
@@ -88,8 +99,8 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
         >
           <Combobox.Target>
             <TextInput
-              label="Font Size"
-              placeholder="Type or select font size (8-200)"
+              label={t('sign.text.fontSizeLabel', 'Font size')}
+              placeholder={t('sign.text.fontSizePlaceholder', 'Type or select font size (8-200)')}
               value={fontSizeInput}
               onChange={(event) => {
                 const value = event.currentTarget.value;
@@ -135,14 +146,29 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
         {onTextColorChange && (
           <Box>
             <TextInput
-              label="Text Color"
-              value={textColor}
-              readOnly
+              label={t('sign.text.colorLabel', 'Text colour')}
+              value={colorInput}
+              placeholder="#000000"
               disabled={disabled}
-              onClick={() => !disabled && setIsColorPickerOpen(true)}
-              style={{ cursor: disabled ? 'default' : 'pointer' }}
+              onChange={(e) => {
+                const value = e.currentTarget.value;
+                setColorInput(value);
+
+                // Update color if valid hex
+                if (isValidHexColor(value)) {
+                  onTextColorChange(value);
+                }
+              }}
+              onBlur={() => {
+                // Revert to valid color on blur if invalid
+                if (!isValidHexColor(colorInput)) {
+                  setColorInput(textColor);
+                }
+              }}
+              style={{ width: '100%' }}
               rightSection={
                 <Box
+                  onClick={() => !disabled && setIsColorPickerOpen(true)}
                   style={{
                     width: 24,
                     height: 24,
@@ -169,4 +195,4 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
       )}
     </Stack>
   );
-};
+};

frontend/src/core/components/tools/sign/SavedSignaturesSection.tsx

@@ -0,0 +1,292 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { ActionIcon, Alert, Badge, Box, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
+import { LocalIcon } from '@app/components/shared/LocalIcon';
+import { MAX_SAVED_SIGNATURES, SavedSignature, SavedSignatureType } from '@app/hooks/tools/sign/useSavedSignatures';
+
+interface SavedSignaturesSectionProps {
+  signatures: SavedSignature[];
+  disabled?: boolean;
+  isAtCapacity: boolean;
+  onUseSignature: (signature: SavedSignature) => void;
+  onDeleteSignature: (signature: SavedSignature) => void;
+  onRenameSignature: (id: string, label: string) => void;
+}
+
+const typeBadgeColor: Record<SavedSignatureType, string> = {
+  canvas: 'indigo',
+  image: 'teal',
+  text: 'grape',
+};
+
+export const SavedSignaturesSection = ({
+  signatures,
+  disabled = false,
+  isAtCapacity,
+  onUseSignature,
+  onDeleteSignature,
+  onRenameSignature,
+}: SavedSignaturesSectionProps) => {
+  const { t } = useTranslation();
+  const [labelDrafts, setLabelDrafts] = useState<Record<string, string>>({});
+  const [activeIndex, setActiveIndex] = useState(0);
+  const activeSignature = signatures[activeIndex];
+  const appliedSignatureIdRef = useRef<string | null>(null);
+  const onUseSignatureRef = useRef(onUseSignature);
+
+  useEffect(() => {
+    onUseSignatureRef.current = onUseSignature;
+  }, [onUseSignature]);
+
+  useEffect(() => {
+    setLabelDrafts(prev => {
+      const nextDrafts: Record<string, string> = {};
+      signatures.forEach(sig => {
+        nextDrafts[sig.id] = prev[sig.id] ?? sig.label ?? '';
+      });
+      return nextDrafts;
+    });
+  }, [signatures]);
+
+  useEffect(() => {
+    if (signatures.length === 0) {
+      setActiveIndex(0);
+      return;
+    }
+    setActiveIndex(prev => Math.min(prev, Math.max(signatures.length - 1, 0)));
+  }, [signatures.length]);
+
+  const handleNavigate = useCallback(
+    (direction: 'prev' | 'next') => {
+      setActiveIndex(prev => {
+        if (direction === 'prev') {
+          return Math.max(0, prev - 1);
+        }
+        return Math.min(signatures.length - 1, prev + 1);
+      });
+    },
+    [signatures.length]
+  );
+
+  const renderPreview = (signature: SavedSignature) => {
+    if (signature.type === 'text') {
+      return (
+        <Box
+          component="div"
+          style={{
+            fontFamily: signature.fontFamily,
+            fontSize: `${signature.fontSize}px`,
+            color: signature.textColor,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: '120px',
+            borderRadius: '0.5rem',
+            backgroundColor: '#ffffff',
+            padding: '0.5rem',
+            textAlign: 'center',
+            overflow: 'hidden',
+          }}
+        >
+          <Text
+            size="lg"
+            style={{
+              fontFamily: signature.fontFamily,
+              color: signature.textColor,
+              whiteSpace: 'nowrap',
+            }}
+          >
+            {signature.signerName}
+          </Text>
+        </Box>
+      );
+    }
+
+    return (
+      <Box
+        component="div"
+        style={{
+          backgroundColor: '#ffffff',
+          borderRadius: '0.5rem',
+          height: '120px',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          padding: '0.5rem',
+        }}
+      >
+        <Box
+          component="img"
+          src={signature.dataUrl}
+          alt={signature.label}
+          style={{
+            maxWidth: '100%',
+            maxHeight: '100%',
+            objectFit: 'contain',
+          }}
+        />
+      </Box>
+    );
+  };
+
+  const emptyState = (
+    <Card withBorder>
+      <Stack gap="xs">
+        <Text fw={500}>{t('sign.saved.emptyTitle', 'No saved signatures yet')}</Text>
+        <Text size="sm" c="dimmed">
+          {t(
+            'sign.saved.emptyDescription',
+            'Draw, upload, or type a signature above, then use "Save to library" to keep up to {{max}} favourites ready to use.',
+            { max: MAX_SAVED_SIGNATURES }
+          )}
+        </Text>
+      </Stack>
+    </Card>
+  );
+
+  const typeLabel = (type: SavedSignatureType) => {
+    switch (type) {
+      case 'canvas':
+        return t('sign.saved.type.canvas', 'Drawing');
+      case 'image':
+        return t('sign.saved.type.image', 'Upload');
+      case 'text':
+        return t('sign.saved.type.text', 'Text');
+      default:
+        return type;
+    }
+  };
+
+  const handleLabelBlur = (signature: SavedSignature) => {
+    const nextValue = labelDrafts[signature.id]?.trim() ?? '';
+    if (!nextValue || nextValue === signature.label) {
+      setLabelDrafts(prev => ({ ...prev, [signature.id]: signature.label }));
+      return;
+    }
+    onRenameSignature(signature.id, nextValue);
+  };
+
+  const handleLabelChange = (event: React.ChangeEvent<HTMLInputElement>, signature: SavedSignature) => {
+    const { value } = event.currentTarget;
+    setLabelDrafts(prev => ({ ...prev, [signature.id]: value }));
+  };
+
+  const handleLabelKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, signature: SavedSignature) => {
+    if (event.key === 'Enter') {
+      event.currentTarget.blur();
+    }
+    if (event.key === 'Escape') {
+      setLabelDrafts(prev => ({ ...prev, [signature.id]: signature.label }));
+      event.currentTarget.blur();
+    }
+  };
+
+  useEffect(() => {
+    if (!activeSignature || disabled) {
+      appliedSignatureIdRef.current = null;
+      return;
+    }
+
+    if (appliedSignatureIdRef.current === activeSignature.id) {
+      return;
+    }
+
+    appliedSignatureIdRef.current = activeSignature.id;
+    onUseSignatureRef.current(activeSignature);
+  }, [activeSignature, disabled]);
+
+  return (
+    <Stack gap="sm">
+      <Group justify="space-between" align="flex-start">
+        <Stack gap={0}>
+          <Text fw={600} size="md">
+            {t('sign.saved.heading', 'Saved signatures')}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t('sign.saved.description', 'Reuse saved signatures at any time.')}
+          </Text>
+        </Stack>
+      </Group>
+
+      {isAtCapacity && (
+        <Alert color="yellow" title={t('sign.saved.limitTitle', 'Limit reached')}>
+          <Text size="sm">
+            {t('sign.saved.limitDescription', 'Remove a saved signature before adding new ones (max {{max}}).', {
+              max: MAX_SAVED_SIGNATURES,
+            })}
+          </Text>
+        </Alert>
+      )}
+
+      {signatures.length === 0 ? (
+        emptyState
+      ) : (
+        <Stack gap="xs">
+          <Group justify="space-between" align="center">
+            <Text size="sm" c="dimmed">
+              {t('sign.saved.carouselPosition', '{{current}} of {{total}}', {
+                current: activeIndex + 1,
+                total: signatures.length,
+              })}
+            </Text>
+            <Group gap={4}>
+              <ActionIcon
+                variant="light"
+                aria-label={t('sign.saved.prev', 'Previous')}
+                onClick={() => handleNavigate('prev')}
+                disabled={disabled || activeIndex === 0}
+              >
+                <LocalIcon icon="material-symbols:chevron-left-rounded" width={18} height={18} />
+              </ActionIcon>
+              <ActionIcon
+                variant="light"
+                aria-label={t('sign.saved.next', 'Next')}
+                onClick={() => handleNavigate('next')}
+                disabled={disabled || activeIndex >= signatures.length - 1}
+              >
+                <LocalIcon icon="material-symbols:chevron-right-rounded" width={18} height={18} />
+              </ActionIcon>
+            </Group>
+          </Group>
+
+          {activeSignature && (
+            <Card withBorder padding="sm" key={activeSignature.id}>
+              <Stack gap="sm">
+                <Group justify="space-between" align="center">
+                  <Badge color={typeBadgeColor[activeSignature.type]} variant="light">
+                    {typeLabel(activeSignature.type)}
+                  </Badge>
+                  <Tooltip label={t('sign.saved.delete', 'Remove')}>
+                    <ActionIcon
+                      variant="subtle"
+                      color="red"
+                      aria-label={t('sign.saved.delete', 'Remove')}
+                      onClick={() => onDeleteSignature(activeSignature)}
+                      disabled={disabled}
+                    >
+                      <LocalIcon icon="material-symbols:delete-outline-rounded" width={18} height={18} />
+                    </ActionIcon>
+                  </Tooltip>
+                </Group>
+
+                {renderPreview(activeSignature)}
+
+                <TextInput
+                  label={t('sign.saved.label', 'Label')}
+                  value={labelDrafts[activeSignature.id] ?? activeSignature.label}
+                  onChange={event => handleLabelChange(event, activeSignature)}
+                  onBlur={() => handleLabelBlur(activeSignature)}
+                  onKeyDown={event => handleLabelKeyDown(event, activeSignature)}
+                  disabled={disabled}
+                />
+
+              </Stack>
+            </Card>
+          )}
+        </Stack>
+      )}
+    </Stack>
+  );
+};
+
+export default SavedSignaturesSection;

frontend/src/core/components/viewer/EmbedPdfViewer.tsx

@@ -14,6 +14,7 @@ import { createStirlingFilesAndStubs } from '@app/services/fileStubHelpers';
 import NavigationWarningModal from '@app/components/shared/NavigationWarningModal';
 import { isStirlingFile } from '@app/types/fileContext';
 import { useViewerRightRailButtons } from '@app/components/viewer/useViewerRightRailButtons';
+import { SignaturePlacementOverlay } from '@app/components/viewer/SignaturePlacementOverlay';
 import { useWheelZoom } from '@app/hooks/useWheelZoom';
 
 export interface EmbedPdfViewerProps {
@@ -34,6 +35,7 @@ const EmbedPdfViewerContent = ({
   setActiveFileIndex: externalSetActiveFileIndex,
 }: EmbedPdfViewerProps) => {
   const viewerRef = React.useRef<HTMLDivElement>(null);
+  const pdfContainerRef = useRef<HTMLDivElement>(null);
   const [isViewerHovered, setIsViewerHovered] = React.useState(false);
 
   const { isThumbnailSidebarVisible, toggleThumbnailSidebar, zoomActions, panActions: _panActions, rotationActions: _rotationActions, getScrollState, getRotationState, isAnnotationMode, isAnnotationsVisible, exportActions } = useViewer();
@@ -53,7 +55,7 @@ const EmbedPdfViewerContent = ({
   }, [rotationState.rotation]);
 
   // Get signature context
-  const { signatureApiRef, historyApiRef } = useSignature();
+  const { signatureApiRef, historyApiRef, signatureConfig, isPlacementMode } = useSignature();
 
   // Get current file from FileContext
   const { selectors, state } = useFileState();
@@ -71,6 +73,9 @@ const EmbedPdfViewerContent = ({
 
   // Enable annotations when: in sign mode, OR annotation mode is active, OR we want to show existing annotations
   const shouldEnableAnnotations = isSignatureMode || isAnnotationMode || isAnnotationsVisible;
+  const isPlacementOverlayActive = Boolean(
+    isSignatureMode && shouldEnableAnnotations && isPlacementMode && signatureConfig
+  );
 
   // Track which file tab is active
   const [internalActiveFileIndex, setInternalActiveFileIndex] = useState(0);
@@ -247,15 +252,17 @@ const EmbedPdfViewerContent = ({
       ) : (
         <>
           {/* EmbedPDF Viewer */}
-          <Box style={{
-            position: 'relative',
-            flex: 1,
-            overflow: 'hidden',
-            minHeight: 0,
-            minWidth: 0,
-            marginRight: isThumbnailSidebarVisible ? '15rem' : '0',
-            transition: 'margin-right 0.3s ease'
-          }}>
+          <Box
+            ref={pdfContainerRef}
+            style={{
+              position: 'relative',
+              flex: 1,
+              overflow: 'hidden',
+              minHeight: 0,
+              minWidth: 0,
+              marginRight: isThumbnailSidebarVisible ? '15rem' : '0',
+              transition: 'margin-right 0.3s ease'
+            }}>
             <LocalEmbedPDF
               key={currentFile && isStirlingFile(currentFile) ? currentFile.fileId : (effectiveFile.file instanceof File ? effectiveFile.file.name : effectiveFile.url)}
               file={effectiveFile.file}
@@ -268,6 +275,11 @@ const EmbedPdfViewerContent = ({
                 // Future: Handle signature completion
               }}
             />
+            <SignaturePlacementOverlay
+              containerRef={pdfContainerRef}
+              isActive={isPlacementOverlayActive}
+              signatureConfig={signatureConfig}
+            />
           </Box>
         </>
       )}

frontend/src/core/components/viewer/HistoryAPIBridge.tsx

@@ -1,14 +1,16 @@
-import { useImperativeHandle, forwardRef, useEffect } from 'react';
+import { useImperativeHandle, forwardRef, useEffect, useRef } from 'react';
 import { useHistoryCapability } from '@embedpdf/plugin-history/react';
 import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
 import { useSignature } from '@app/contexts/SignatureContext';
-import { uuidV4 } from '@embedpdf/models';
+import { PdfAnnotationSubtype, uuidV4 } from '@embedpdf/models';
 import type { HistoryAPI } from '@app/components/viewer/viewerTypes';
+import { ANNOTATION_RECREATION_DELAY_MS, ANNOTATION_VERIFICATION_DELAY_MS } from '@app/constants/app';
 
 export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge(_, ref) {
   const { provides: historyApi } = useHistoryCapability();
   const { provides: annotationApi } = useAnnotationCapability();
   const { getImageData, storeImageData } = useSignature();
+  const restoringIds = useRef<Set<string>>(new Set());
 
   // Monitor annotation events to detect when annotations are restored
   useEffect(() => {
@@ -18,17 +20,58 @@ export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge
       const annotation = event.annotation;
 
       // Store image data for all STAMP annotations immediately when created or modified
-      if (annotation && annotation.type === 13 && annotation.id && annotation.imageSrc) {
+      if (annotation && annotation.type === PdfAnnotationSubtype.STAMP && annotation.id && annotation.imageSrc) {
         const storedImageData = getImageData(annotation.id);
-        if (!storedImageData || storedImageData !== annotation.imageSrc) {
+        if (!storedImageData) {
           storeImageData(annotation.id, annotation.imageSrc);
         }
       }
 
+      if (annotation && annotation.type === PdfAnnotationSubtype.STAMP && annotation.id) {
+        // Prevent infinite loops when we recreate annotations
+        if (restoringIds.current.has(annotation.id)) {
+          restoringIds.current.delete(annotation.id);
+          return;
+        }
+
+        const storedImageData = getImageData(annotation.id);
+        // If EmbedPDF cropped the image (imageSrc changed), recreate annotation using stored data
+        if (storedImageData && annotation.imageSrc && annotation.imageSrc !== storedImageData) {
+          const newId = uuidV4();
+          restoringIds.current.add(newId);
+          storeImageData(newId, storedImageData);
+
+          const pageIndex = event.pageIndex ?? annotation.pageIndex ?? annotation.object?.pageIndex ?? 0;
+          const rect = annotation.rect || annotation.bounds || annotation.rectangle || annotation.position;
+
+          try {
+            annotationApi.deleteAnnotation(pageIndex, annotation.id);
+            setTimeout(() => {
+              annotationApi.createAnnotation(pageIndex, {
+                type: annotation.type,
+                rect,
+                author: annotation.author || 'Digital Signature',
+                subject: annotation.subject || 'Digital Signature',
+                pageIndex,
+                id: newId,
+                created: annotation.created || new Date(),
+                imageSrc: storedImageData,
+                contents: storedImageData,
+                data: storedImageData,
+                appearance: storedImageData,
+              });
+            }, ANNOTATION_RECREATION_DELAY_MS);
+          } catch (restoreError) {
+            console.error('HistoryAPI: Failed to restore cropped signature:', restoreError);
+          }
+          return;
+        }
+      }
+
       // Handle annotation restoration after undo operations
       if (event.type === 'create' && event.committed) {
         // Check if this is a STAMP annotation (signature) that might need image data restoration
-        if (annotation && annotation.type === 13 && annotation.id) {
+        if (annotation && annotation.type === PdfAnnotationSubtype.STAMP && annotation.id) {
           getImageData(annotation.id);
 
           // Delay the check to allow the annotation to be fully created
@@ -61,12 +104,12 @@ export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge
                 // Small delay to ensure deletion completes
                 setTimeout(() => {
                   annotationApi.createAnnotation(event.pageIndex, restoredData);
-                }, 50);
+                }, ANNOTATION_RECREATION_DELAY_MS);
               } catch (error) {
                 console.error('HistoryAPI: Failed to restore annotation:', error);
               }
             }
-          }, 100);
+          }, ANNOTATION_VERIFICATION_DELAY_MS);
         }
       }
     };
@@ -102,6 +145,21 @@ export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge
     canRedo: () => {
       return historyApi ? historyApi.canRedo() : false;
     },
+
+    subscribe: (listener: () => void) => {
+      if (!historyApi?.onHistoryChange) {
+        return () => {};
+      }
+
+      const wrapped = () => listener();
+      const unsubscribe = historyApi.onHistoryChange(wrapped);
+      listener();
+
+      if (typeof unsubscribe === 'function') {
+        return unsubscribe;
+      }
+      return () => {};
+    },
   }), [historyApi]);
 
   return null; // This is a bridge component with no UI

frontend/src/core/components/viewer/PdfViewerToolbar.tsx

@@ -43,23 +43,32 @@ export function PdfViewerToolbar({
 
   // Register for immediate scroll updates and sync with actual scroll state
   useEffect(() => {
-    registerImmediateScrollUpdate((currentPage, _totalPages) => {
+    const unregister = registerImmediateScrollUpdate((currentPage, _totalPages) => {
       setPageInput(currentPage);
     });
     setPageInput(scrollState.currentPage);
-  }, [registerImmediateScrollUpdate]);
+    return () => {
+      unregister?.();
+    };
+  }, [registerImmediateScrollUpdate, scrollState.currentPage]);
 
   // Register for immediate zoom updates and sync with actual zoom state
   useEffect(() => {
-    registerImmediateZoomUpdate(setDisplayZoomPercent);
+    const unregister = registerImmediateZoomUpdate(setDisplayZoomPercent);
     setDisplayZoomPercent(zoomState.zoomPercent || 140);
-  }, [zoomState.zoomPercent, registerImmediateZoomUpdate]);
+    return () => {
+      unregister?.();
+    };
+  }, [registerImmediateZoomUpdate, zoomState.zoomPercent]);
 
   useEffect(() => {
-    registerImmediateSpreadUpdate((_mode, isDual) => {
+    const unregister = registerImmediateSpreadUpdate((_mode, isDual) => {
       setIsDualPageActive(isDual);
     });
     setIsDualPageActive(spreadState.isDualPage);
+    return () => {
+      unregister?.();
+    };
   }, [registerImmediateSpreadUpdate, spreadState.isDualPage]);
 
   const handleZoomOut = () => {

frontend/src/core/components/viewer/SignatureAPIBridge.tsx

@@ -1,12 +1,211 @@
-import { useImperativeHandle, forwardRef, useEffect } from 'react';
+import { useImperativeHandle, forwardRef, useEffect, useCallback, useRef, useState } from 'react';
 import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
 import { PdfAnnotationSubtype, uuidV4 } from '@embedpdf/models';
 import { useSignature } from '@app/contexts/SignatureContext';
 import type { SignatureAPI } from '@app/components/viewer/viewerTypes';
+import type { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
+import { useViewer } from '@app/contexts/ViewerContext';
+
+// Minimum allowed width/height (in pixels) for a signature image or text stamp.
+// This prevents rendering issues and ensures signatures are always visible and usable.
+const MIN_SIGNATURE_DIMENSION = 12;
+
+// Use 2x oversampling to improve text rendering quality (anti-aliasing) when generating signature images.
+// This provides a good balance between visual fidelity and performance/memory usage.
+const TEXT_OVERSAMPLE_FACTOR = 2;
+
+type TextStampImageResult = {
+  dataUrl: string;
+  pixelWidth: number;
+  pixelHeight: number;
+  displayWidth: number;
+  displayHeight: number;
+};
+
+const extractDataUrl = (value: unknown, depth = 0, visited: Set<unknown> = new Set()): string | undefined => {
+  if (!value || depth > 6) return undefined;
+
+  // Prevent circular references
+  if (typeof value === 'object' && visited.has(value)) {
+    return undefined;
+  }
+
+  if (typeof value === 'string') {
+    return value.startsWith('data:image') ? value : undefined;
+  }
+
+  if (typeof value === 'object') {
+    visited.add(value);
+
+    if (Array.isArray(value)) {
+      for (const entry of value) {
+        const result = extractDataUrl(entry, depth + 1, visited);
+        if (result) return result;
+      }
+    } else {
+      for (const key of Object.keys(value as Record<string, unknown>)) {
+        const result = extractDataUrl((value as Record<string, unknown>)[key], depth + 1, visited);
+        if (result) return result;
+      }
+    }
+  }
+
+  return undefined;
+};
+
+const createTextStampImage = (
+  config: SignParameters,
+  displaySize?: { width: number; height: number } | null
+): TextStampImageResult | null => {
+  const text = (config.signerName ?? '').trim();
+  if (!text) {
+    return null;
+  }
+
+  const fontSize = config.fontSize ?? 16;
+  const fontFamily = config.fontFamily ?? 'Helvetica';
+  const textColor = config.textColor ?? '#000000';
+
+  const paddingX = Math.max(4, Math.round(fontSize * 0.8));
+  const paddingY = Math.max(4, Math.round(fontSize * 0.6));
+
+  const measureCanvas = document.createElement('canvas');
+  const measureCtx = measureCanvas.getContext('2d');
+  if (!measureCtx) {
+    return null;
+  }
+
+  measureCtx.font = `${fontSize}px ${fontFamily}`;
+  const metrics = measureCtx.measureText(text);
+  const textWidth = Math.ceil(metrics.width);
+  const naturalWidth = Math.max(MIN_SIGNATURE_DIMENSION, textWidth + paddingX * 2);
+  const naturalHeight = Math.max(MIN_SIGNATURE_DIMENSION, Math.ceil(fontSize + paddingY * 2));
+
+  const scale =
+    displaySize && naturalWidth > 0 && naturalHeight > 0
+      ? Math.min(displaySize.width / naturalWidth, displaySize.height / naturalHeight)
+      : 1;
+
+  const displayWidth = Math.max(MIN_SIGNATURE_DIMENSION, naturalWidth * scale);
+  const displayHeight = Math.max(MIN_SIGNATURE_DIMENSION, naturalHeight * scale);
+
+  const canvasWidth = Math.max(
+    MIN_SIGNATURE_DIMENSION,
+    Math.round(displayWidth * TEXT_OVERSAMPLE_FACTOR)
+  );
+  const canvasHeight = Math.max(
+    MIN_SIGNATURE_DIMENSION,
+    Math.round(displayHeight * TEXT_OVERSAMPLE_FACTOR)
+  );
+
+  const canvas = document.createElement('canvas');
+  canvas.width = canvasWidth;
+  canvas.height = canvasHeight;
+
+  const ctx = canvas.getContext('2d');
+  if (!ctx) {
+    return null;
+  }
+
+  const effectiveScale = scale * TEXT_OVERSAMPLE_FACTOR;
+  ctx.scale(effectiveScale, effectiveScale);
+
+  ctx.fillStyle = textColor;
+  ctx.font = `${fontSize}px ${fontFamily}`;
+  ctx.textAlign = 'left';
+  ctx.textBaseline = 'middle';
+
+  const horizontalPadding = paddingX;
+  const verticalCenter = naturalHeight / 2;
+  ctx.fillText(text, horizontalPadding, verticalCenter);
+
+  return {
+    dataUrl: canvas.toDataURL('image/png'),
+    pixelWidth: canvasWidth,
+    pixelHeight: canvasHeight,
+    displayWidth,
+    displayHeight,
+  };
+};
 
 export const SignatureAPIBridge = forwardRef<SignatureAPI>(function SignatureAPIBridge(_, ref) {
   const { provides: annotationApi } = useAnnotationCapability();
-  const { signatureConfig, storeImageData, isPlacementMode } = useSignature();
+  const { signatureConfig, storeImageData, isPlacementMode, placementPreviewSize } = useSignature();
+  const { getZoomState, registerImmediateZoomUpdate } = useViewer();
+  const [currentZoom, setCurrentZoom] = useState(() => getZoomState()?.currentZoom ?? 1);
+  const lastStampImageRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    setCurrentZoom(getZoomState()?.currentZoom ?? 1);
+    const unregister = registerImmediateZoomUpdate(percent => {
+      setCurrentZoom(Math.max(percent / 100, 0.01));
+    });
+    return () => {
+      unregister?.();
+    };
+  }, [getZoomState, registerImmediateZoomUpdate]);
+
+  const cssToPdfSize = useCallback(
+    (size: { width: number; height: number }) => {
+      const zoom = currentZoom || 1;
+      const factor = 1 / zoom;
+      return {
+        width: size.width * factor,
+        height: size.height * factor,
+      };
+    },
+    [currentZoom]
+  );
+
+  const applyStampDefaults = useCallback(
+    (imageSrc: string, subject: string, size?: { width: number; height: number }) => {
+      if (!annotationApi) return;
+
+      annotationApi.setActiveTool(null);
+      annotationApi.setActiveTool('stamp');
+      const stampTool = annotationApi.getActiveTool();
+      if (stampTool && stampTool.id === 'stamp') {
+        annotationApi.setToolDefaults('stamp', {
+          imageSrc,
+          subject,
+          ...(size ? { imageSize: { width: size.width, height: size.height } } : {}),
+        });
+      }
+    },
+    [annotationApi]
+  );
+
+  const configureStampDefaults = useCallback(async () => {
+    if (!annotationApi || !signatureConfig) {
+      return;
+    }
+
+    try {
+      if (signatureConfig.signatureType === 'text' && signatureConfig.signerName) {
+        const textStamp = createTextStampImage(signatureConfig, placementPreviewSize);
+        if (textStamp) {
+          const displaySize =
+            placementPreviewSize ?? {
+              width: textStamp.displayWidth,
+              height: textStamp.displayHeight,
+            };
+          const pdfSize = cssToPdfSize(displaySize);
+          lastStampImageRef.current = textStamp.dataUrl;
+          applyStampDefaults(textStamp.dataUrl, `Text Signature - ${signatureConfig.signerName}`, pdfSize);
+        }
+        return;
+      }
+
+      if (signatureConfig.signatureData) {
+        const pdfSize = placementPreviewSize ? cssToPdfSize(placementPreviewSize) : undefined;
+        lastStampImageRef.current = signatureConfig.signatureData;
+        applyStampDefaults(signatureConfig.signatureData, `Digital Signature - ${signatureConfig.reason || 'Document signing'}`, pdfSize);
+        return;
+      }
+    } catch (error) {
+      console.error('Error preparing signature defaults:', error);
+    }
+  }, [annotationApi, signatureConfig, placementPreviewSize, applyStampDefaults, cssToPdfSize]);
 
 
   // Enable keyboard deletion of selected annotations
@@ -108,58 +307,9 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI>(function SignatureAPI
     activateSignaturePlacementMode: () => {
       if (!annotationApi || !signatureConfig) return;
 
-      try {
-        if (signatureConfig.signatureType === 'text' && signatureConfig.signerName) {
-          // Skip native text tools - always use stamp for consistent sizing
-          const activatedTool = null;
-
-          if (!activatedTool) {
-            // Create text image as stamp with actual pixel size matching desired display size
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d');
-            if (ctx) {
-              const baseFontSize = signatureConfig.fontSize || 16;
-              const fontFamily = signatureConfig.fontFamily || 'Helvetica';
-              const textColor = signatureConfig.textColor || '#000000';
-
-              // Canvas pixel size = display size (EmbedPDF uses pixel dimensions directly)
-              canvas.width = Math.max(200, signatureConfig.signerName.length * baseFontSize * 0.6);
-              canvas.height = baseFontSize + 20;
-
-              ctx.fillStyle = textColor;
-              ctx.font = `${baseFontSize}px ${fontFamily}`;
-              ctx.textAlign = 'left';
-              ctx.textBaseline = 'middle';
-              ctx.fillText(signatureConfig.signerName, 10, canvas.height / 2);
-              const dataURL = canvas.toDataURL();
-
-              // Deactivate and reactivate to force refresh
-              annotationApi.setActiveTool(null);
-              annotationApi.setActiveTool('stamp');
-              const stampTool = annotationApi.getActiveTool();
-              if (stampTool && stampTool.id === 'stamp') {
-                annotationApi.setToolDefaults('stamp', {
-                  imageSrc: dataURL,
-                  subject: `Text Signature - ${signatureConfig.signerName}`,
-                });
-              }
-            }
-          }
-        } else if (signatureConfig.signatureData) {
-          // Use stamp tool for image/canvas signatures
-          annotationApi.setActiveTool('stamp');
-          const activeTool = annotationApi.getActiveTool();
-
-          if (activeTool && activeTool.id === 'stamp') {
-            annotationApi.setToolDefaults('stamp', {
-              imageSrc: signatureConfig.signatureData,
-              subject: `Digital Signature - ${signatureConfig.reason || 'Document signing'}`,
-            });
-          }
-        }
-      } catch (error) {
+      configureStampDefaults().catch((error) => {
         console.error('Error activating signature tool:', error);
-      }
+      });
     },
 
     updateDrawSettings: (color: string, size: number) => {
@@ -196,7 +346,7 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI>(function SignatureAPI
       if (pageAnnotationsTask) {
         pageAnnotationsTask.toPromise().then((pageAnnotations: any) => {
           const annotation = pageAnnotations?.find((ann: any) => ann.id === annotationId);
-          if (annotation && annotation.type === 13 && annotation.imageSrc) {
+          if (annotation && annotation.type === PdfAnnotationSubtype.STAMP && annotation.imageSrc) {
             // Store image data before deletion
             storeImageData(annotationId, annotation.imageSrc);
           }
@@ -230,7 +380,61 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI>(function SignatureAPI
         return [];
       }
     },
-  }), [annotationApi, signatureConfig]);
+  }), [annotationApi, signatureConfig, placementPreviewSize, applyStampDefaults]);
+
+  useEffect(() => {
+    if (!annotationApi?.onAnnotationEvent) {
+      return;
+    }
+
+    const unsubscribe = annotationApi.onAnnotationEvent(event => {
+      if (event.type !== 'create' && event.type !== 'update') {
+        return;
+      }
+
+      const annotation: any = event.annotation;
+      const annotationId: string | undefined = annotation?.id;
+      if (!annotationId) {
+        return;
+      }
+
+      const directData =
+        extractDataUrl(annotation.imageSrc) ||
+        extractDataUrl(annotation.imageData) ||
+        extractDataUrl(annotation.appearance) ||
+        extractDataUrl(annotation.stampData) ||
+        extractDataUrl(annotation.contents) ||
+        extractDataUrl(annotation.data) ||
+        extractDataUrl(annotation.customData) ||
+        extractDataUrl(annotation.asset);
+
+      const dataToStore = directData || lastStampImageRef.current;
+      if (dataToStore) {
+        storeImageData(annotationId, dataToStore);
+      }
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [annotationApi, storeImageData]);
+
+  useEffect(() => {
+    if (!isPlacementMode) {
+      return;
+    }
+
+    let cancelled = false;
+    configureStampDefaults().catch((error) => {
+      if (!cancelled) {
+        console.error('Error updating signature defaults:', error);
+      }
+    });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [isPlacementMode, configureStampDefaults, placementPreviewSize, signatureConfig]);
 
 
   return null; // This is a bridge component with no UI

frontend/src/core/components/viewer/SignaturePlacementOverlay.tsx

@@ -0,0 +1,171 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Box } from '@mantine/core';
+import type { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
+import { buildSignaturePreview, SignaturePreview } from '@app/utils/signaturePreview';
+import { useSignature } from '@app/contexts/SignatureContext';
+import {
+  MAX_PREVIEW_WIDTH_RATIO,
+  MAX_PREVIEW_HEIGHT_RATIO,
+  MAX_PREVIEW_WIDTH_REM,
+  MAX_PREVIEW_HEIGHT_REM,
+  MIN_SIGNATURE_DIMENSION_REM,
+  OVERLAY_EDGE_PADDING_REM,
+} from '@app/constants/signConstants';
+
+// Convert rem to pixels using browser's base font size (typically 16px)
+const remToPx = (rem: number) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+
+interface SignaturePlacementOverlayProps {
+  containerRef: React.RefObject<HTMLElement | null>;
+  isActive: boolean;
+  signatureConfig: SignParameters | null;
+}
+
+export const SignaturePlacementOverlay: React.FC<SignaturePlacementOverlayProps> = ({
+  containerRef,
+  isActive,
+  signatureConfig,
+}) => {
+  const [preview, setPreview] = useState<SignaturePreview | null>(null);
+  const [cursor, setCursor] = useState<{ x: number; y: number } | null>(null);
+  const { setPlacementPreviewSize } = useSignature();
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const buildPreview = async () => {
+      try {
+        const value = await buildSignaturePreview(signatureConfig ?? null);
+        if (!cancelled) {
+          setPreview(value);
+        }
+      } catch (error) {
+        console.error('Failed to build signature preview:', error);
+        if (!cancelled) {
+          setPreview(null);
+        }
+      }
+    };
+
+    buildPreview();
+
+    return () => {
+      cancelled = true;
+    };
+  }, [signatureConfig]);
+
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!isActive || !element) {
+      setCursor(null);
+      return;
+    }
+
+    const handleMove = (event: MouseEvent) => {
+      const rect = element.getBoundingClientRect();
+      setCursor({
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top,
+      });
+    };
+
+    const handleLeave = () => setCursor(null);
+
+    element.addEventListener('mousemove', handleMove);
+    element.addEventListener('mouseleave', handleLeave);
+
+    return () => {
+      element.removeEventListener('mousemove', handleMove);
+      element.removeEventListener('mouseleave', handleLeave);
+    };
+  }, [containerRef, isActive]);
+
+  const scaledSize = useMemo(() => {
+    if (!preview || !containerRef.current) {
+      return null;
+    }
+
+    const container = containerRef.current;
+    const containerWidth = container.clientWidth || 1;
+    const containerHeight = container.clientHeight || 1;
+
+    const maxWidth = Math.min(containerWidth * MAX_PREVIEW_WIDTH_RATIO, remToPx(MAX_PREVIEW_WIDTH_REM));
+    const maxHeight = Math.min(containerHeight * MAX_PREVIEW_HEIGHT_RATIO, remToPx(MAX_PREVIEW_HEIGHT_REM));
+
+    const scale = Math.min(
+      1,
+      maxWidth / Math.max(preview.width, 1),
+      maxHeight / Math.max(preview.height, 1)
+    );
+
+    return {
+      width: Math.max(remToPx(MIN_SIGNATURE_DIMENSION_REM), preview.width * scale),
+      height: Math.max(remToPx(MIN_SIGNATURE_DIMENSION_REM), preview.height * scale),
+    };
+  }, [preview, containerRef]);
+
+  useEffect(() => {
+    if (!isActive || !scaledSize) {
+      setPlacementPreviewSize(null);
+    } else {
+      setPlacementPreviewSize(scaledSize);
+    }
+  }, [isActive, scaledSize, setPlacementPreviewSize]);
+
+  useEffect(() => {
+    return () => {
+      setPlacementPreviewSize(null);
+    };
+  }, [setPlacementPreviewSize]);
+
+  const display = useMemo(() => {
+    if (!preview || !scaledSize || !cursor || !containerRef.current) {
+      return null;
+    }
+
+    const container = containerRef.current;
+    const containerWidth = container.clientWidth || 1;
+    const containerHeight = container.clientHeight || 1;
+
+    const width = scaledSize.width;
+    const height = scaledSize.height;
+    const edgePadding = remToPx(OVERLAY_EDGE_PADDING_REM);
+
+    const clampedLeft = Math.max(edgePadding, Math.min(cursor.x - width / 2, containerWidth - width - edgePadding));
+    const clampedTop = Math.max(edgePadding, Math.min(cursor.y - height / 2, containerHeight - height - edgePadding));
+
+    return {
+      left: clampedLeft,
+      top: clampedTop,
+      width,
+      height,
+      dataUrl: preview.dataUrl,
+    };
+  }, [preview, scaledSize, cursor, containerRef]);
+
+  if (!isActive || !display || !preview) {
+    return null;
+  }
+
+  return (
+    <Box
+      style={{
+        position: 'absolute',
+        pointerEvents: 'none',
+        left: `${display.left}px`,
+        top: `${display.top}px`,
+        width: `${display.width}px`,
+        height: `${display.height}px`,
+        backgroundImage: `url(${display.dataUrl})`,
+        backgroundSize: '100% 100%',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        boxShadow: '0 0 0 1px rgba(30, 136, 229, 0.55), 0 6px 18px rgba(30, 136, 229, 0.25)',
+        borderRadius: '4px',
+        transition: 'transform 70ms ease-out',
+        transform: 'translateZ(0)',
+        opacity: 0.6,
+      }}
+    />
+  );
+};

frontend/src/core/components/viewer/ZoomAPIBridge.tsx

@@ -214,4 +214,4 @@ export function ZoomAPIBridge() {
   }, [zoom, zoomState, registerBridge, triggerImmediateZoomUpdate]);
 
   return null;
-}
+}

frontend/src/core/components/viewer/viewerTypes.ts

@@ -21,4 +21,5 @@ export interface HistoryAPI {
   redo: () => void;
   canUndo: () => boolean;
   canRedo: () => boolean;
+  subscribe?: (listener: () => void) => () => void;
 }

frontend/src/core/constants/app.ts

@@ -3,6 +3,11 @@
 // When no subpath, use empty string instead of '.' to avoid relative path issues
 export const BASE_PATH = (import.meta.env.BASE_URL || '/').replace(/\/$/, '').replace(/^\.$/, '');
 
+// EmbedPDF needs time to remove annotations internally before a recreation runs.
+// Without the buffer we occasionally end up with duplicate annotations or stale image data.
+export const ANNOTATION_RECREATION_DELAY_MS = 50;
+export const ANNOTATION_VERIFICATION_DELAY_MS = 100;
+
 /** For in-app navigations when you must touch window.location (rare). */
 export const withBasePath = (path: string): string => {
   const clean = path.startsWith('/') ? path : `/${path}`;

frontend/src/core/constants/signConstants.ts

@@ -0,0 +1,15 @@
+// Timeout delays (ms) to allow PDF viewer to complete rendering before activating placement mode
+export const PLACEMENT_ACTIVATION_DELAY = 60;  // Standard delay for signature changes
+export const FILE_SWITCH_ACTIVATION_DELAY = 80; // Slightly longer delay when switching files
+
+// Signature preview sizing
+export const MAX_PREVIEW_WIDTH_RATIO = 0.35;   // Max preview width as percentage of container
+export const MAX_PREVIEW_HEIGHT_RATIO = 0.35;  // Max preview height as percentage of container
+export const MAX_PREVIEW_WIDTH_REM = 15;       // Absolute max width in rem
+export const MAX_PREVIEW_HEIGHT_REM = 10;      // Absolute max height in rem
+export const MIN_SIGNATURE_DIMENSION_REM = 0.75; // Min dimension for visibility
+export const OVERLAY_EDGE_PADDING_REM = 0.25;  // Padding from container edges
+
+// Text signature padding (relative to font size)
+export const HORIZONTAL_PADDING_RATIO = 0.8;
+export const VERTICAL_PADDING_RATIO = 0.6;

frontend/src/core/contexts/SignatureContext.tsx

@@ -10,6 +10,8 @@ interface SignatureState {
   isPlacementMode: boolean;
   // Whether signatures have been applied (allows export)
   signaturesApplied: boolean;
+  // Size (in screen units) we want newly placed signatures to use
+  placementPreviewSize: { width: number; height: number } | null;
 }
 
 // Signature actions interface
@@ -26,6 +28,7 @@ interface SignatureActions {
   storeImageData: (id: string, data: string) => void;
   getImageData: (id: string) => string | undefined;
   setSignaturesApplied: (applied: boolean) => void;
+  setPlacementPreviewSize: (size: { width: number; height: number } | null) => void;
 }
 
 // Combined context interface
@@ -42,6 +45,7 @@ const initialState: SignatureState = {
   signatureConfig: null,
   isPlacementMode: false,
   signaturesApplied: true, // Start as true (no signatures placed yet)
+  placementPreviewSize: null,
 };
 
 // Provider component
@@ -131,6 +135,27 @@ export const SignatureProvider: React.FC<{ children: ReactNode }> = ({ children
     }));
   }, []);
 
+  const setPlacementPreviewSize = useCallback((size: { width: number; height: number } | null) => {
+    setState(prev => {
+      const prevSize = prev.placementPreviewSize;
+      const same =
+        (prevSize === null && size === null) ||
+        (prevSize !== null &&
+          size !== null &&
+          Math.abs(prevSize.width - size.width) < 0.5 &&
+          Math.abs(prevSize.height - size.height) < 0.5);
+
+      if (same) {
+        return prev;
+      }
+
+      return {
+        ...prev,
+        placementPreviewSize: size,
+      };
+    });
+  }, []);
+
   // No auto-activation - all modes use manual buttons
 
   const contextValue: SignatureContextValue = {
@@ -149,6 +174,7 @@ export const SignatureProvider: React.FC<{ children: ReactNode }> = ({ children
     storeImageData,
     getImageData,
     setSignaturesApplied,
+    setPlacementPreviewSize,
   };
 
   return (

frontend/src/core/contexts/ViewerContext.tsx

@@ -39,14 +39,23 @@ import {
 import { SpreadMode } from '@embedpdf/plugin-spread/react';
 
 function useImmediateNotifier<Args extends unknown[]>() {
-  const callbackRef = useRef<((...args: Args) => void) | null>(null);
+  const callbacksRef = useRef(new Set<(...args: Args) => void>());
 
   const register = useCallback((callback: (...args: Args) => void) => {
-    callbackRef.current = callback;
+    callbacksRef.current.add(callback);
+    return () => {
+      callbacksRef.current.delete(callback);
+    };
   }, []);
 
   const trigger = useCallback((...args: Args) => {
-    callbackRef.current?.(...args);
+    callbacksRef.current.forEach(cb => {
+      try {
+        cb(...args);
+      } catch (error) {
+        console.error('Immediate callback error:', error);
+      }
+    });
   }, []);
 
   return { register, trigger };
@@ -91,9 +100,9 @@ interface ViewerContextType {
   getExportState: () => ExportState;
 
   // Immediate update callbacks
-  registerImmediateZoomUpdate: (callback: (percent: number) => void) => void;
-  registerImmediateScrollUpdate: (callback: (currentPage: number, totalPages: number) => void) => void;
-  registerImmediateSpreadUpdate: (callback: (mode: SpreadMode, isDualPage: boolean) => void) => void;
+  registerImmediateZoomUpdate: (callback: (percent: number) => void) => () => void;
+  registerImmediateScrollUpdate: (callback: (currentPage: number, totalPages: number) => void) => () => void;
+  registerImmediateSpreadUpdate: (callback: (mode: SpreadMode, isDualPage: boolean) => void) => () => void;
 
   // Internal - for bridges to trigger immediate updates
   triggerImmediateScrollUpdate: (currentPage: number, totalPages: number) => void;

frontend/src/core/hooks/tools/sign/useSavedSignatures.ts

@@ -0,0 +1,212 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+const STORAGE_KEY = 'stirling:saved-signatures:v1';
+export const MAX_SAVED_SIGNATURES = 10;
+
+export type SavedSignatureType = 'canvas' | 'image' | 'text';
+
+export type SavedSignaturePayload =
+  | {
+      type: 'canvas';
+      dataUrl: string;
+    }
+  | {
+      type: 'image';
+      dataUrl: string;
+    }
+  | {
+      type: 'text';
+      signerName: string;
+      fontFamily: string;
+      fontSize: number;
+      textColor: string;
+    };
+
+export type SavedSignature = SavedSignaturePayload & {
+  id: string;
+  label: string;
+  createdAt: number;
+  updatedAt: number;
+};
+
+export type AddSignatureResult =
+  | { success: true; signature: SavedSignature }
+  | { success: false; reason: 'limit' | 'invalid' };
+
+const isSupportedEnvironment = () => typeof window !== 'undefined' && typeof window.localStorage !== 'undefined';
+
+const safeParse = (raw: string | null): SavedSignature[] => {
+  if (!raw) {
+    return [];
+  }
+
+  try {
+    const parsed = JSON.parse(raw);
+    if (!Array.isArray(parsed)) {
+      return [];
+    }
+
+    return parsed.filter((entry: any): entry is SavedSignature => {
+      if (!entry || typeof entry !== 'object') {
+        return false;
+      }
+      if (typeof entry.id !== 'string' || typeof entry.label !== 'string') {
+        return false;
+      }
+      if (typeof entry.type !== 'string') {
+        return false;
+      }
+
+      if (entry.type === 'text') {
+        return (
+          typeof entry.signerName === 'string' &&
+          typeof entry.fontFamily === 'string' &&
+          typeof entry.fontSize === 'number' &&
+          typeof entry.textColor === 'string'
+        );
+      }
+
+      return typeof entry.dataUrl === 'string';
+    });
+  } catch {
+    return [];
+  }
+};
+
+const readFromStorage = (): SavedSignature[] => {
+  if (!isSupportedEnvironment()) {
+    return [];
+  }
+
+  try {
+    return safeParse(window.localStorage.getItem(STORAGE_KEY));
+  } catch {
+    return [];
+  }
+};
+
+const writeToStorage = (entries: SavedSignature[]) => {
+  if (!isSupportedEnvironment()) {
+    return;
+  }
+
+  try {
+    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(entries));
+  } catch {
+    // Swallow storage errors silently; we still keep state in memory.
+  }
+};
+
+const generateId = () => crypto.randomUUID();
+
+export const useSavedSignatures = () => {
+  const [savedSignatures, setSavedSignatures] = useState<SavedSignature[]>(() => readFromStorage());
+
+  useEffect(() => {
+    if (!isSupportedEnvironment()) {
+      return;
+    }
+
+    const syncFromStorage = () => {
+      setSavedSignatures(readFromStorage());
+    };
+
+    window.addEventListener('storage', syncFromStorage);
+    return () => window.removeEventListener('storage', syncFromStorage);
+  }, []);
+
+  useEffect(() => {
+    writeToStorage(savedSignatures);
+  }, [savedSignatures]);
+
+  const isAtCapacity = savedSignatures.length >= MAX_SAVED_SIGNATURES;
+
+  const addSignature = useCallback(
+    (payload: SavedSignaturePayload, label?: string): AddSignatureResult => {
+      if (
+        (payload.type === 'text' && !payload.signerName.trim()) ||
+        ((payload.type === 'canvas' || payload.type === 'image') && !payload.dataUrl)
+      ) {
+        return { success: false, reason: 'invalid' };
+      }
+
+      let createdSignature: SavedSignature | null = null;
+      setSavedSignatures(prev => {
+        if (prev.length >= MAX_SAVED_SIGNATURES) {
+          return prev;
+        }
+
+        const timestamp = Date.now();
+        const nextEntry: SavedSignature = {
+          ...payload,
+          id: generateId(),
+          label: (label || 'Signature').trim() || 'Signature',
+          createdAt: timestamp,
+          updatedAt: timestamp,
+        };
+        createdSignature = nextEntry;
+        return [nextEntry, ...prev];
+      });
+
+      return createdSignature
+        ? { success: true, signature: createdSignature }
+        : { success: false, reason: 'limit' };
+    },
+    []
+  );
+
+  const removeSignature = useCallback((id: string) => {
+    setSavedSignatures(prev => prev.filter(entry => entry.id !== id));
+  }, []);
+
+  const updateSignatureLabel = useCallback((id: string, nextLabel: string) => {
+    setSavedSignatures(prev =>
+      prev.map(entry =>
+        entry.id === id
+          ? { ...entry, label: nextLabel.trim() || entry.label || 'Signature', updatedAt: Date.now() }
+          : entry
+      )
+    );
+  }, []);
+
+  const replaceSignature = useCallback((id: string, payload: SavedSignaturePayload) => {
+    setSavedSignatures(prev =>
+      prev.map(entry =>
+        entry.id === id
+          ? {
+              ...entry,
+              ...payload,
+              updatedAt: Date.now(),
+            }
+          : entry
+      )
+    );
+  }, []);
+
+  const clearSignatures = useCallback(() => {
+    setSavedSignatures([]);
+  }, []);
+
+  const byTypeCounts = useMemo(() => {
+    return savedSignatures.reduce<Record<SavedSignatureType, number>>(
+      (acc, entry) => {
+        acc[entry.type] += 1;
+        return acc;
+      },
+      { canvas: 0, image: 0, text: 0 }
+    );
+  }, [savedSignatures]);
+
+  return {
+    savedSignatures,
+    isAtCapacity,
+    addSignature,
+    removeSignature,
+    updateSignatureLabel,
+    replaceSignature,
+    clearSignatures,
+    byTypeCounts,
+  };
+};
+
+export type UseSavedSignaturesReturn = ReturnType<typeof useSavedSignatures>;

frontend/src/core/hooks/tools/sign/useSignOperation.ts

@@ -23,7 +23,7 @@ export const buildSignFormData = (params: SignParameters, file: File): FormData
   }
 
   // Add signature type
-  formData.append('signatureType', params.signatureType || 'draw');
+  formData.append('signatureType', params.signatureType || 'canvas');
 
   // Add other parameters
   if (params.reason) {
@@ -56,4 +56,4 @@ export const useSignOperation = (): ToolOperationHook<SignParameters> => {
     ...signOperationConfig,
     getErrorMessage: createStandardErrorHandler(t('sign.error.failed', 'An error occurred while signing the PDF.'))
   });
-};
+};

frontend/src/core/hooks/tools/sign/useSignParameters.ts

@@ -9,7 +9,7 @@ export interface SignaturePosition {
 }
 
 export interface SignParameters {
-  signatureType: 'image' | 'text' | 'draw' | 'canvas';
+  signatureType: 'image' | 'text' | 'canvas';
   signatureData?: string; // Base64 encoded image or text content
   signaturePosition?: SignaturePosition;
   reason?: string;
@@ -60,4 +60,4 @@ export const useSignParameters = () => {
     endpointName: 'add-signature',
     validateFn: validateSignParameters,
   });
-};
+};

frontend/src/core/hooks/useTooltipPosition.ts

@@ -87,7 +87,7 @@ export function useTooltipPosition({
     if (sidebarTooltip) {
       // Require sidebar refs and state for proper positioning
       if (!sidebarRefs || !sidebarState) {
-        console.warn('⚠️ Sidebar tooltip requires sidebarRefs and sidebarState props');
+        console.warn('Sidebar tooltip requires sidebarRefs and sidebarState props');
         setPositionReady(false);
         return;
       }
@@ -97,7 +97,7 @@ export function useTooltipPosition({
 
       // Only show tooltip if we have the tool panel active
       if (!sidebarInfo.isToolPanelActive) {
-        console.log('🚫 Not showing tooltip - tool panel not active');
+        console.log('Not showing tooltip - tool panel not active');
         setPositionReady(false);
         return;
       }

frontend/src/core/tools/Sign.tsx

@@ -115,6 +115,32 @@ const Sign = (props: BaseToolProps) => {
         // Deactivate signature placement mode after everything completes
         handleDeactivateSignature();
 
+        const hasSignatureReady = (() => {
+          const params = base.params.parameters;
+          switch (params.signatureType) {
+            case 'canvas':
+            case 'image':
+              return Boolean(params.signatureData);
+            case 'text':
+              return Boolean(params.signerName && params.signerName.trim() !== '');
+            default:
+              return false;
+          }
+        })();
+
+        if (hasSignatureReady) {
+          if (typeof window !== 'undefined') {
+            // TODO: Ideally, we should trigger handleActivateSignaturePlacement when the viewer is ready.
+            // However, due to current architectural constraints, we use a 150ms delay to allow the viewer to reload.
+            // This value was empirically determined to be sufficient for most environments, but should be revisited.
+            window.setTimeout(() => {
+              handleActivateSignaturePlacement();
+            }, 150);
+          } else {
+            handleActivateSignaturePlacement();
+          }
+        }
+
         // File has been consumed - viewer should reload automatically via key prop
       } else {
         console.error('Signature flattening failed');
@@ -122,7 +148,7 @@ const Sign = (props: BaseToolProps) => {
     } catch (error) {
       console.error('Error saving signed document:', error);
     }
-  }, [exportActions, base.selectedFiles, selectors, consumeFiles, signatureApiRef, getImageData, setWorkbench, activateDrawMode, setSignaturesApplied, getScrollState, handleDeactivateSignature, setHasUnsavedChanges, unregisterUnsavedChangesChecker, activeFileIndex, setActiveFileIndex]);
+  }, [exportActions, base.selectedFiles, base.params.parameters, selectors, consumeFiles, signatureApiRef, getImageData, setWorkbench, activateDrawMode, setSignaturesApplied, getScrollState, handleDeactivateSignature, handleActivateSignaturePlacement, setHasUnsavedChanges, unregisterUnsavedChangesChecker, activeFileIndex, setActiveFileIndex]);
 
   const getSteps = () => {
     const steps = [];
@@ -179,4 +205,4 @@ Sign.getDefaultParameters = () => ({
   signerName: '',
 });
 
-export default Sign as ToolComponent;
+export default Sign as ToolComponent;

frontend/src/core/utils/signatureFlattening.ts

@@ -1,4 +1,5 @@
 import { PDFDocument, rgb } from 'pdf-lib';
+import { PdfAnnotationSubtype } from '@embedpdf/models';
 import { generateThumbnailWithMetadata } from '@app/utils/thumbnailUtils';
 import { createProcessedFile, createChildStub } from '@app/contexts/file/fileActions';
 import { createStirlingFile, StirlingFile, FileId, StirlingFileStub } from '@app/types/fileContext';
@@ -228,7 +229,7 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
                         size: 12,
                         color: rgb(0, 0, 0)
                       });
-                    } else if (annotation.type === 14 || annotation.type === 15) {
+                    } else if (annotation.type === PdfAnnotationSubtype.INK || annotation.type === PdfAnnotationSubtype.LINE) {
                       // Handle ink annotations (drawn signatures)
                       page.drawRectangle({
                         x: pdfX,

frontend/src/core/utils/signaturePreview.ts

@@ -0,0 +1,84 @@
+import { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
+import { HORIZONTAL_PADDING_RATIO, VERTICAL_PADDING_RATIO } from '@app/constants/signConstants';
+
+export interface SignaturePreview {
+  dataUrl: string;
+  width: number;
+  height: number;
+}
+
+const loadImage = (src: string): Promise<HTMLImageElement> =>
+  new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+
+export const buildSignaturePreview = async (config: SignParameters | null): Promise<SignaturePreview | null> => {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return null;
+  }
+
+  if (!config) {
+    return null;
+  }
+
+  if (config.signatureType === 'text') {
+    const text = config.signerName?.trim();
+    if (!text) {
+      return null;
+    }
+
+    const fontSize = config.fontSize ?? 16;
+    const fontFamily = config.fontFamily ?? 'Helvetica';
+    const textColor = config.textColor ?? '#000000';
+
+    const paddingX = Math.round(fontSize * HORIZONTAL_PADDING_RATIO);
+    const paddingY = Math.round(fontSize * VERTICAL_PADDING_RATIO);
+
+    const measureCanvas = document.createElement('canvas');
+    const measureCtx = measureCanvas.getContext('2d');
+
+    if (!measureCtx) {
+      return null;
+    }
+
+    measureCtx.font = `${fontSize}px ${fontFamily}`;
+    const metrics = measureCtx.measureText(text);
+    const textWidth = Math.ceil(metrics.width);
+
+    const width = Math.max(1, textWidth + paddingX * 2);
+    const height = Math.max(1, Math.ceil(fontSize + paddingY * 2));
+
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      return null;
+    }
+
+    ctx.fillStyle = textColor;
+    ctx.font = `${fontSize}px ${fontFamily}`;
+    ctx.textBaseline = 'middle';
+    ctx.textAlign = 'left';
+    ctx.fillText(text, paddingX, height / 2);
+
+    const dataUrl = canvas.toDataURL('image/png');
+    return { dataUrl, width, height };
+  }
+
+  const dataUrl = config.signatureData;
+  if (!dataUrl) {
+    return null;
+  }
+
+  const image = await loadImage(dataUrl);
+  return {
+    dataUrl,
+    width: image.naturalWidth || image.width,
+    height: image.naturalHeight || image.height,
+  };
+};