@signiphi/pdf-signer 0.2.0-beta.2 → 0.2.0-beta.21

package/dist/components/index.mjs

@@ -1,4 +1,4 @@
-import * as React8 from 'react';
+import * as React9 from 'react';
 import { forwardRef, useRef, useState, useCallback, useEffect, useImperativeHandle, useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 import * as pdfjsLib from 'pdfjs-dist';
@@ -9,7 +9,7 @@ import { cva } from 'class-variance-authority';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import { X, ChevronDown, ChevronUp, Check, Circle, AlertCircle, Lock, CheckCircle, Pen, Calendar as Calendar$1, ChevronLeft, ChevronRight, FileText, Upload, ListChecks, ZoomOut, ZoomIn, Loader2, CheckCircle2, Clock, Image, File, Star } from 'lucide-react';
+import { X, ChevronDown, ChevronUp, Check, Circle, AlertCircle, Lock, CheckCircle, Pen, Calendar as Calendar$1, ChevronLeft, ChevronRight, FileText, Upload, ListChecks, ZoomOut, ZoomIn, Loader2, CheckCircle2, Clock, Image, File } from 'lucide-react';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { DayPicker, useDayPicker } from 'react-day-picker';
 import 'react-day-picker/dist/style.css';
@@ -17,6 +17,7 @@ import * as SelectPrimitive from '@radix-ui/react-select';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { createPortal } from 'react-dom';
 
 // src/components/PdfViewerStyled.tsx
 var _workerSrcComputed = false;
@@ -70,7 +71,7 @@ function initializePdfJs() {
 async function checkPdfJsVersion(viewerBasePath = "/pdfjs") {
   const workerVersion = pdfjsLib.version;
   try {
-    const versionUrl = `${viewerBasePath}/.version`;
+    const versionUrl = `${viewerBasePath}/version.txt`;
     const response = await fetch(versionUrl);
     if (!response.ok) {
       return {
@@ -158,6 +159,7 @@ function validatePdfBytes(pdfBytes) {
 }
 function isAutoGeneratedLabel(label) {
   if (!label || !label.trim()) return true;
+  const trimmed = label.trim();
   const autoLabels = [
     "Signature",
     "Initials",
@@ -168,7 +170,65 @@ function isAutoGeneratedLabel(label) {
     "Option",
     "Radio"
   ];
-  return autoLabels.includes(label.trim());
+  if (autoLabels.includes(trimmed)) return true;
+  if (/^\d{10,}$/.test(trimmed)) return true;
+  const typeTimestampPattern = new RegExp(
+    `^(${autoLabels.join("|")})[\\s_-]?\\d{10,}$`,
+    "i"
+  );
+  if (typeTimestampPattern.test(trimmed)) return true;
+  const typeNumberPattern = new RegExp(
+    `^(${autoLabels.join("|")})[\\s_-]?\\d{1,3}$`,
+    "i"
+  );
+  if (typeNumberPattern.test(trimmed)) return true;
+  const typeWordsJoined = autoLabels.join("|");
+  const corruptedPattern = new RegExp(
+    `^(${typeWordsJoined})[\\s_-]?\\d{10,}[\\s_-]?(${typeWordsJoined})+`,
+    "i"
+  );
+  if (corruptedPattern.test(trimmed)) return true;
+  const repeatedTypePattern = new RegExp(
+    `^((${typeWordsJoined})[\\s_-]+)+(${typeWordsJoined})$`,
+    "i"
+  );
+  if (repeatedTypePattern.test(trimmed)) return true;
+  return false;
+}
+function hasDrawableLabel(field) {
+  if (!field.label || !field.label.trim()) return false;
+  if (field.isLabelAutoGenerated) return false;
+  if (isAutoGeneratedLabel(field.label)) return false;
+  return true;
+}
+function getFieldDisplayName(field) {
+  if (field.label && !isAutoGeneratedLabel(field.label)) {
+    return field.label;
+  }
+  const typeNames = {
+    "text": "Text field",
+    "signature": "Signature",
+    "initials": "Initials",
+    "date": "Date field",
+    "checkbox": "Checkbox",
+    "dropdown": "Dropdown",
+    "radio": "Radio selection",
+    "radiogroup": "Radio selection",
+    "text_label": "Text label"
+  };
+  if (field.type) {
+    const typeName = typeNames[field.type.toLowerCase()];
+    if (typeName) {
+      return typeName;
+    }
+  }
+  if (field.name) {
+    let cleaned = field.name.replace(/_?(signature|initials|date)$/i, "").replace(/[_-]\d{10,}$/, "").replace(/[_-]/g, " ").trim();
+    if (cleaned && !isAutoGeneratedLabel(cleaned)) {
+      return cleaned.replace(/\b\w/g, (l) => l.toUpperCase());
+    }
+  }
+  return "This field";
 }
 function validateFieldValues(values) {
   const errors = [];
@@ -301,6 +361,92 @@ function getSigniphiMetadata(pdfDoc) {
   }
 }
 
+// src/utils/font-loader.ts
+var SIGNATURE_FONTS = [
+  { name: "dancing-script", family: "Dancing Script", label: "Elegant" },
+  { name: "great-vibes", family: "Great Vibes", label: "Formal" },
+  { name: "caveat", family: "Caveat", label: "Casual" },
+  { name: "homemade-apple", family: "Homemade Apple", label: "Natural" },
+  { name: "sacramento", family: "Sacramento", label: "Flowing" }
+];
+var DEFAULT_SIGNATURE_FONT = {
+  name: "dancing-script",
+  family: "Dancing Script",
+  label: "Elegant"
+};
+var GOOGLE_FONTS_URL = "https://fonts.googleapis.com/css2?family=Dancing+Script&family=Great+Vibes&family=Caveat&family=Homemade+Apple&family=Sacramento&display=swap";
+var fontsLoaded = false;
+var fontsLoadingPromise = null;
+async function loadSignatureFonts() {
+  if (fontsLoaded) {
+    return;
+  }
+  if (fontsLoadingPromise) {
+    return fontsLoadingPromise;
+  }
+  fontsLoadingPromise = new Promise((resolve, reject) => {
+    const existingLink = document.querySelector(
+      `link[href="${GOOGLE_FONTS_URL}"]`
+    );
+    if (existingLink) {
+      fontsLoaded = true;
+      resolve();
+      return;
+    }
+    const link = document.createElement("link");
+    link.href = GOOGLE_FONTS_URL;
+    link.rel = "stylesheet";
+    link.onload = () => {
+      fontsLoaded = true;
+      resolve();
+    };
+    link.onerror = () => {
+      fontsLoadingPromise = null;
+      reject(new Error("Failed to load signature fonts from Google Fonts"));
+    };
+    document.head.appendChild(link);
+  });
+  return fontsLoadingPromise;
+}
+function generateSignatureFromText(options) {
+  const {
+    text,
+    fontFamily,
+    width = 450,
+    height = 200,
+    fontSize = 48,
+    color = "#000000",
+    backgroundColor = null
+  } = options;
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas 2d context");
+  }
+  if (backgroundColor) {
+    ctx.fillStyle = backgroundColor;
+    ctx.fillRect(0, 0, width, height);
+  } else {
+    ctx.clearRect(0, 0, width, height);
+  }
+  ctx.font = `${fontSize}px "${fontFamily}"`;
+  ctx.fillStyle = color;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  let adjustedFontSize = fontSize;
+  let textMetrics = ctx.measureText(text);
+  const maxWidth = width * 0.9;
+  while (textMetrics.width > maxWidth && adjustedFontSize > 16) {
+    adjustedFontSize -= 2;
+    ctx.font = `${adjustedFontSize}px "${fontFamily}"`;
+    textMetrics = ctx.measureText(text);
+  }
+  ctx.fillText(text, width / 2, height / 2);
+  return canvas.toDataURL("image/png");
+}
+
 // src/utils/pdf-lib-loader.ts
 var pdfLibPromise = null;
 async function loadPdfLib() {
@@ -315,18 +461,15 @@ function isFieldVisibleToSigner(field, multiSignerContext) {
   if (!multiSignerContext.isMultiSigner) {
     return true;
   }
-  const { currentSignerEmail, isPrimarySigner, isFinalSigner } = multiSignerContext;
+  const { currentSignerEmail } = multiSignerContext;
   if (!field.assignedSignerEmail) {
-    return isFinalSigner;
+    return true;
   }
   if (field.assignedSignerEmail === currentSignerEmail) {
     return true;
   }
-  if (field.assignedSignerEmail.includes("recipients")) {
-    return isPrimarySigner;
-  }
-  if (field.assignedSignerEmail.includes("signers")) {
-    return isFinalSigner;
+  if (field.assignedSignerEmail === "to-recipients" || field.assignedSignerEmail === "additional-signers") {
+    return true;
   }
   return false;
 }
@@ -340,18 +483,15 @@ function shouldFlattenField(field, multiSignerContext) {
   if (!multiSignerContext.isMultiSigner) {
     return true;
   }
-  const { currentSignerEmail, isPrimarySigner, isFinalSigner } = multiSignerContext;
+  const { currentSignerEmail } = multiSignerContext;
   if (!field.assignedSignerEmail) {
-    return isFinalSigner;
+    return true;
   }
   if (field.assignedSignerEmail === currentSignerEmail) {
     return true;
   }
-  if (field.assignedSignerEmail.includes("recipients")) {
-    return isPrimarySigner;
-  }
-  if (field.assignedSignerEmail.includes("signers")) {
-    return isFinalSigner;
+  if (field.assignedSignerEmail === "to-recipients" || field.assignedSignerEmail === "additional-signers") {
+    return true;
   }
   return false;
 }
@@ -391,18 +531,23 @@ function findPageIndexWithFallback(pages, pageRef) {
 
 // src/utils/pdf-field-type-helpers.ts
 function detectFieldType(field) {
-  const typeName = field.constructor.name;
-  if (typeName === "PDFTextField") {
-    return "text";
-  } else if (typeName === "PDFCheckBox") {
+  const f = field;
+  if (typeof f.check === "function" && typeof f.uncheck === "function") {
     return "checkbox";
-  } else if (typeName === "PDFDropdown") {
+  }
+  if (typeof f.select === "function" && typeof f.getOptions === "function" && typeof f.check !== "function" && typeof f.setOptions !== "function") {
+    return "radiogroup";
+  }
+  if (typeof f.select === "function" && typeof f.getOptions === "function" && (typeof f.setOptions === "function" || typeof f.addOptions === "function")) {
     return "dropdown";
-  } else if (typeName === "PDFOptionList") {
+  }
+  if (typeof f.getOptions === "function" && typeof f.setOptions === "function" && typeof f.select !== "function") {
     return "optionlist";
-  } else if (typeName === "PDFRadioGroup") {
-    return "radiogroup";
-  } else if (typeName === "PDFSignature") {
+  }
+  if (typeof f.getText === "function" && typeof f.setText === "function") {
+    return "text";
+  }
+  if (typeof f.getText !== "function" && typeof f.check !== "function" && typeof f.select !== "function") {
     return "signature";
   }
   return "unknown";
@@ -411,13 +556,20 @@ function extractFieldValue(field, fieldType) {
   try {
     switch (fieldType) {
       case "text":
+      case "date":
         return field.getText?.() || "";
       case "checkbox":
         return field.isChecked?.() ? "true" : "false";
       case "dropdown":
-      case "optionlist":
+      case "optionlist": {
+        const selected = field.getSelected?.();
+        return Array.isArray(selected) ? selected[0] || "" : String(selected || "");
+      }
       case "radiogroup":
-        return field.getSelected?.()?.[0] || "";
+      case "radio": {
+        const radioSelected = field.getSelected?.();
+        return radioSelected ? String(radioSelected) : "";
+      }
       default:
         return "";
     }
@@ -489,12 +641,16 @@ async function validatePdfFormFields(pdfBytes, fieldValues, signatures, extracte
     const errors = [];
     for (const field of pdfFormFields) {
       if (field.required) {
+        const extractedField = extractedFields?.find((f) => f.name === field.name);
         if (multiSignerContext?.isMultiSigner && extractedFields) {
-          const extractedField = extractedFields.find((f) => f.name === field.name);
           if (!extractedField) {
             continue;
           }
         }
+        const logicalType = extractedField?.type || field.type;
+        if (logicalType === "date" || logicalType === "signature" || logicalType === "initials") {
+          continue;
+        }
         let hasValue = false;
         const fieldValue = fieldValues[field.name];
         const signatureValue = signatures[field.name];
@@ -504,16 +660,17 @@ async function validatePdfFormFields(pdfBytes, fieldValues, signatures, extracte
           hasValue = !!(signatureValue || fieldValue || mainSignature);
         } else if (field.name.includes("initials")) {
           hasValue = !!(signatureValue || fieldValue || mainInitials);
+        } else if (field.type === "checkbox" || logicalType === "checkbox") {
+          hasValue = fieldValue === "true" || field.value === "true";
         } else {
           hasValue = !!(fieldValue || field.value);
         }
         if (!hasValue) {
-          let friendlyName = field.name.replace(/[_-]/g, " ").replace(/\b\w/g, (l) => l.toUpperCase());
-          if (field.name.includes("signature")) {
-            friendlyName = "Signature";
-          } else if (field.name.includes("initials")) {
-            friendlyName = "Initials";
-          }
+          const friendlyName = getFieldDisplayName({
+            label: extractedField?.label,
+            name: field.name,
+            type: logicalType
+          });
           errors.push(`${friendlyName} is required`);
         }
       }
@@ -524,7 +681,80 @@ async function validatePdfFormFields(pdfBytes, fieldValues, signatures, extracte
     return ["Unable to validate form fields. Please ensure all required fields are completed."];
   }
 }
-async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {}, currentSignerEmail, extractedFormFields, metadata, auditTrail, multiSignerContext) {
+function extractFieldFontSize(fieldName, field, extractedFormFields) {
+  const DEFAULT_FONT_SIZE = 10;
+  const MIN_FONT_SIZE = 8;
+  const MAX_FONT_SIZE = 72;
+  const fieldInfo = extractedFormFields?.find((f) => f.name === fieldName);
+  if (fieldInfo?.fontSize && fieldInfo.fontSize >= MIN_FONT_SIZE && fieldInfo.fontSize <= MAX_FONT_SIZE) {
+    return fieldInfo.fontSize;
+  }
+  const daFontSize = extractFromDAField(field);
+  if (daFontSize !== null) {
+    return daFontSize;
+  }
+  const tuFontSize = extractFromTUField(field);
+  if (tuFontSize !== null) {
+    return tuFontSize;
+  }
+  return DEFAULT_FONT_SIZE;
+}
+function extractFromDAField(field) {
+  try {
+    const fieldWithAcro = field;
+    const dict = fieldWithAcro.acroField?.dict;
+    if (!dict) return null;
+    const daKey = dict.context?.obj?.("DA") || "DA";
+    const daEntry = dict.lookup?.(daKey) || dict.get?.(daKey);
+    if (!daEntry) return null;
+    let daValue = "";
+    if (typeof daEntry.decodeText === "function") {
+      daValue = daEntry.decodeText();
+    } else if (typeof daEntry.asString === "function") {
+      daValue = daEntry.asString();
+    } else {
+      daValue = String(daEntry);
+    }
+    const daMatch = daValue.match(/\s+(\d+)\s+Tf/i);
+    if (daMatch?.[1]) {
+      const fontSize = parseInt(daMatch[1], 10);
+      if (fontSize >= 8 && fontSize <= 72) {
+        return fontSize;
+      }
+    }
+  } catch {
+  }
+  return null;
+}
+function extractFromTUField(field) {
+  try {
+    const fieldWithAcro = field;
+    const dict = fieldWithAcro.acroField?.dict;
+    if (!dict) return null;
+    const tuKey = dict.context?.obj?.("TU") || "TU";
+    const tuEntry = dict.lookup?.(tuKey) || dict.get?.(tuKey);
+    if (!tuEntry) return null;
+    let tuValue = "";
+    if (typeof tuEntry.decodeText === "function") {
+      tuValue = tuEntry.decodeText();
+    } else if (typeof tuEntry.asString === "function") {
+      tuValue = tuEntry.asString();
+    } else {
+      tuValue = String(tuEntry);
+    }
+    tuValue = tuValue.replace(/^\(|\)$|^<|>$/g, "");
+    const match = tuValue.match(/\|fontSize:(\d+)$/);
+    if (match?.[1]) {
+      const fontSize = parseInt(match[1], 10);
+      if (fontSize >= 8 && fontSize <= 72) {
+        return fontSize;
+      }
+    }
+  } catch {
+  }
+  return null;
+}
+async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {}, _currentSignerEmail, extractedFormFields, metadata, auditTrail, multiSignerContext) {
   try {
     const { PDFDocument, rgb, StandardFonts } = await loadPdfLib();
     const pdfDoc = await PDFDocument.load(pdfBytes);
@@ -541,39 +771,39 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
         continue;
       }
       try {
-        const fieldTypeName = field.constructor.name;
-        if (fieldTypeName === "PDFTextField" || fieldTypeName === "PDFTextField2") {
-          const textField = field;
-          textField.setText?.(fieldValue);
-        } else if (fieldTypeName === "PDFCheckBox" || fieldTypeName === "PDFCheckBox2") {
-          const checkBox = field;
+        const f = field;
+        const isTextField = typeof f.getText === "function" && typeof f.setText === "function";
+        const isCheckbox = typeof f.check === "function" && typeof f.uncheck === "function";
+        const isRadio = typeof f.select === "function" && typeof f.getOptions === "function" && typeof f.check !== "function" && typeof f.setOptions !== "function";
+        const isDropdown = typeof f.select === "function" && (typeof f.setOptions === "function" || typeof f.addOptions === "function");
+        if (isTextField) {
+          f.setText?.(fieldValue);
+        } else if (isCheckbox) {
           if (fieldValue === "true" || fieldValue === "Yes" || fieldValue === "checked" || fieldValue === "On") {
-            checkBox.check?.();
+            f.check?.();
           } else {
-            checkBox.uncheck?.();
+            f.uncheck?.();
           }
-        } else if (fieldTypeName === "PDFRadioGroup" || fieldTypeName === "PDFRadioGroup2") {
-          const radioGroup = field;
+        } else if (isRadio) {
           if (fieldValue === "true" || fieldValue === "false") {
             continue;
           }
           const idxMatch = fieldValue.match(/__RADIO_OPTION_INDEX_(\d+)__/);
           if (idxMatch && idxMatch[1]) {
             const selectedIndex = parseInt(idxMatch[1], 10);
-            const options = radioGroup.getOptions?.() || [];
+            const options = f.getOptions?.() || [];
             if (selectedIndex >= 0 && selectedIndex < options.length) {
-              radioGroup.select?.(options[selectedIndex]);
+              f.select?.(options[selectedIndex]);
             }
           } else {
-            const options = radioGroup.getOptions?.() || [];
+            const options = f.getOptions?.() || [];
             if (options.includes(fieldValue)) {
-              radioGroup.select?.(fieldValue);
+              f.select?.(fieldValue);
             } else {
             }
           }
-        } else if (fieldTypeName === "PDFDropdown" || fieldTypeName === "PDFDropdown2") {
-          const dropdown = field;
-          dropdown.select?.(fieldValue);
+        } else if (isDropdown) {
+          f.select?.(fieldValue);
         }
       } catch (fieldError) {
         logger.error(`Error setting field "${fieldName}":`, fieldError);
@@ -581,11 +811,6 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
     }
     try {
       form.updateFieldAppearances();
-      const PDFName3 = pdfLib.PDFName;
-      const acroForm = pdfDoc.catalog.lookup(PDFName3.of("AcroForm"));
-      if (acroForm && typeof acroForm === "object" && "set" in acroForm) {
-        acroForm.set(PDFName3.of("NeedAppearances"), false);
-      }
     } catch (appearanceError) {
       logger.warn("Could not update field appearances:", appearanceError);
     }
@@ -654,6 +879,20 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
                 const y = fieldPosition.y;
                 const width = Math.max(fieldPosition.width, 80);
                 const height = Math.max(fieldPosition.height, 30);
+                const fieldInfo = extractedFormFields?.find((f) => f.name === fieldName);
+                if (fieldInfo && hasDrawableLabel(fieldInfo)) {
+                  const labelFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+                  const labelFontSize = Math.min(10, height * 0.4);
+                  const labelX = x;
+                  const labelY = y + height + 5;
+                  page.drawText(fieldInfo.label, {
+                    x: labelX,
+                    y: labelY,
+                    size: labelFontSize,
+                    font: labelFont,
+                    color: rgb(0, 0, 0)
+                  });
+                }
                 const signatureDims = signatureImage.scaleToFit(width - 4, height - 4);
                 const finalX = x;
                 const finalY = y;
@@ -688,7 +927,7 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
       console.log("[FLATTEN] After pattern matching in fieldPageMap:", foundInitialsFields);
       if (extractedFormFields && extractedFormFields.length > 0) {
         foundInitialsFields = foundInitialsFields.filter((fieldName) => {
-          const fieldInfo = extractedFormFields.find((f) => f.name === fieldName);
+          const fieldInfo = extractedFormFields.find((f) => f.name === fieldName) || extractedFormFields.find((f) => f.name === fieldName.replace(/_initials$/i, "")) || extractedFormFields.find((f) => fieldName.startsWith(f.name));
           if (!fieldInfo) return false;
           const isActualInitialsField = fieldInfo.type === "initials" || fieldName.toLowerCase().includes("initials");
           if (!isActualInitialsField) return false;
@@ -717,6 +956,19 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
                 const y = fieldPosition.y;
                 const height = Math.max(fieldPosition.height, 20);
                 const fontSize = Math.min(height * 0.7, 14);
+                const fieldInfo = extractedFormFields?.find((f) => f.name === fieldName) || extractedFormFields?.find((f) => f.name === fieldName.replace(/_initials$/i, "")) || extractedFormFields?.find((f) => fieldName.startsWith(f.name)) || extractedFormFields?.find((f) => f.fieldId && fieldName.includes(f.fieldId)) || extractedFormFields?.find((f) => f.type === "initials" && f.name !== "initials_field_main");
+                if (fieldInfo && hasDrawableLabel(fieldInfo)) {
+                  const labelFontSize = Math.min(10, height * 0.4);
+                  const labelX = x;
+                  const labelY = y + height + 5;
+                  page.drawText(fieldInfo.label, {
+                    x: labelX,
+                    y: labelY,
+                    size: labelFontSize,
+                    font,
+                    color: rgb(0, 0, 0)
+                  });
+                }
                 const finalX = x + 2;
                 const finalY = y + (height - fontSize) / 2;
                 console.log("[FLATTEN]   \u2705 Drawing initials at:", { x: finalX, y: finalY, fontSize, text: mainInitialsData });
@@ -759,11 +1011,16 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
     let flattenedCount = 0;
     for (const field of fieldsToFlatten) {
       const fieldName = field.getName();
-      const fieldType = field.constructor.name;
+      const f = field;
+      const isCheckboxField = typeof f.check === "function" && typeof f.uncheck === "function";
+      const isRadioField = typeof f.select === "function" && typeof f.getOptions === "function" && typeof f.check !== "function" && typeof f.setOptions !== "function";
+      const isDropdownField = typeof f.select === "function" && (typeof f.setOptions === "function" || typeof f.addOptions === "function");
+      const isTextField = typeof f.getText === "function" && typeof f.setText === "function";
+      const isSignatureType = !isCheckboxField && !isRadioField && !isDropdownField && !isTextField;
       try {
         const userEnteredValue = formFieldValues[fieldName];
-        const isSignatureField = fieldName.toLowerCase().includes("signature") || fieldType.includes("Signature");
-        const isInitialsField = fieldName.toLowerCase().includes("initials") || fieldType.includes("Initials");
+        const isSignatureField = fieldName.toLowerCase().includes("signature") || isSignatureType;
+        const isInitialsField = fieldName.toLowerCase().includes("initials");
         if (isSignatureField || isInitialsField) {
           form.removeField(field);
           flattenedCount++;
@@ -771,15 +1028,29 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
         }
         const fieldWithWidgets = field;
         const widgets = fieldWithWidgets.acroField?.getWidgets?.() || [];
-        if (fieldType === "PDFCheckBox" || fieldType === "PDFCheckBox2") {
+        if (isCheckboxField) {
           const stringValue = String(userEnteredValue || "");
           const isChecked = stringValue === "true" || stringValue === "Yes" || stringValue === "On" || stringValue === "checked";
+          const fieldInfo = extractedFormFields?.find((f2) => f2.name === fieldName);
+          const labelFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
           if (isChecked) {
             for (const widget of widgets) {
               const result = getWidgetRectangleAndPage(widget, pages);
               if (!result) continue;
               const { rect, page } = result;
-              const checkboxSize = Math.min(rect.width, rect.height) * 0.6;
+              if (fieldInfo && hasDrawableLabel(fieldInfo)) {
+                const labelFontSize = Math.min(10, rect.height * 0.4);
+                const labelX = rect.x + rect.width + 5;
+                const labelY = rect.y + (rect.height - labelFontSize) / 2;
+                page.drawText(fieldInfo.label, {
+                  x: labelX,
+                  y: labelY,
+                  size: labelFontSize,
+                  font: labelFont,
+                  color: rgb(0, 0, 0)
+                });
+              }
+              const checkboxSize = Math.min(rect.width, rect.height);
               const checkboxX = rect.x + (rect.width - checkboxSize) / 2;
               const checkboxY = rect.y + (rect.height - checkboxSize) / 2;
               page.drawRectangle({
@@ -790,21 +1061,51 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
                 borderColor: rgb(0, 0, 0),
                 borderWidth: 1
               });
-              const checkSize = checkboxSize * 0.6;
-              const textWidth = checkSize * 0.6;
-              const textHeight = checkSize * 0.8;
+              const checkFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+              const checkFontSize = checkboxSize * 0.7;
+              const textWidth = checkFont.widthOfTextAtSize("X", checkFontSize);
+              const textHeight = checkFont.heightAtSize(checkFontSize);
               page.drawText("X", {
                 x: checkboxX + (checkboxSize - textWidth) / 2,
-                y: checkboxY + (checkboxSize - textHeight) / 2 + textHeight * 0.2,
-                size: checkSize,
-                font: await pdfDoc.embedFont(StandardFonts.HelveticaBold),
+                y: checkboxY + (checkboxSize - textHeight) / 2 + textHeight * 0.15,
+                size: checkFontSize,
+                font: checkFont,
                 color: rgb(0, 0, 0)
               });
             }
+          } else {
+            for (const widget of widgets) {
+              const result = getWidgetRectangleAndPage(widget, pages);
+              if (!result) continue;
+              const { rect, page } = result;
+              const checkboxSize = Math.min(rect.width, rect.height);
+              const checkboxX = rect.x + (rect.width - checkboxSize) / 2;
+              const checkboxY = rect.y + (rect.height - checkboxSize) / 2;
+              page.drawRectangle({
+                x: checkboxX,
+                y: checkboxY,
+                width: checkboxSize,
+                height: checkboxSize,
+                borderColor: rgb(0, 0, 0),
+                borderWidth: 1
+              });
+              if (fieldInfo && hasDrawableLabel(fieldInfo)) {
+                const labelFontSize = Math.min(12, rect.height * 0.6);
+                const labelX = rect.x + rect.width + 5;
+                const labelY = rect.y + (rect.height - labelFontSize) / 2;
+                page.drawText(fieldInfo.label, {
+                  x: labelX,
+                  y: labelY,
+                  size: labelFontSize,
+                  font: labelFont,
+                  color: rgb(0, 0, 0)
+                });
+              }
+            }
           }
-        } else if (fieldType === "PDFRadioGroup" || fieldType === "PDFRadioGroup2") {
-          const radioGroup = field;
-          const fieldInfo = extractedFormFields?.find((f) => f.name === fieldName);
+        } else if (isRadioField) {
+          const radioGroup = f;
+          const fieldInfo = extractedFormFields?.find((f2) => f2.name === fieldName);
           let actualSelectedValue = "";
           try {
             actualSelectedValue = radioGroup.getSelected?.() || "";
@@ -849,14 +1150,15 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
             const result = getWidgetRectangleAndPage(widget, pages);
             if (!result) continue;
             const { rect, page, pageIndex } = result;
-            if (i === 0 && fieldInfo?.label && fieldInfo.label.trim() && !isAutoGeneratedLabel(fieldInfo.label)) {
+            if (i === 0 && fieldInfo && hasDrawableLabel(fieldInfo)) {
               const groupLabelKey = `${pageIndex}-${fieldName}-grouplabel`;
               if (!drawnGroupLabels.has(groupLabelKey)) {
+                const labelFontSize = Math.min(10, rect.height * 0.4);
                 const labelY = rect.y + rect.height + 3;
                 page.drawText(fieldInfo.label, {
                   x: rect.x,
                   y: labelY,
-                  size: 8,
+                  size: labelFontSize,
                   font: labelFont,
                   color: rgb(0, 0, 0)
                 });
@@ -864,22 +1166,21 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
               }
             } else if (i === 0 && isAutoGeneratedLabel(fieldInfo?.label || "")) {
             }
-            const radioSize = Math.min(rect.width, rect.height) * 0.5;
-            const radioX = rect.x + (rect.width - radioSize) / 2;
-            const radioY = rect.y + (rect.height - radioSize) / 2;
+            const radioSize = Math.min(rect.width, rect.height);
+            const centerX = rect.x + rect.width / 2;
+            const centerY = rect.y + rect.height / 2;
             page.drawCircle({
-              x: radioX + radioSize / 2,
-              y: radioY + radioSize / 2,
-              size: radioSize,
+              x: centerX,
+              y: centerY,
+              size: radioSize / 2,
               borderColor: rgb(0, 0, 0),
               borderWidth: 1
             });
             if (i === selectedIndex) {
-              const circleSize = radioSize * 0.5;
               page.drawCircle({
-                x: radioX + radioSize / 2,
-                y: radioY + radioSize / 2,
-                size: circleSize,
+                x: centerX,
+                y: centerY,
+                size: radioSize / 4,
                 color: rgb(0, 0, 0)
               });
             }
@@ -889,8 +1190,8 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
               if (optionText && !drawnOptionLabels.has(optionKey)) {
                 page.drawText(optionText, {
                   x: rect.x + rect.width + 4,
-                  y: rect.y + (rect.height - 8) / 2,
-                  size: 8,
+                  y: rect.y + (rect.height - 7) / 2,
+                  size: 7,
                   font: labelFont,
                   color: rgb(0, 0, 0)
                 });
@@ -900,17 +1201,31 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
           }
           if (fieldInfo?.options) {
           }
-        } else if (fieldType === "PDFDropdown" || fieldType === "PDFDropdown2") {
+        } else if (isDropdownField) {
           const selectedValue = userEnteredValue ? String(userEnteredValue) : "";
-          if (selectedValue && selectedValue.trim()) {
-            for (const widget of widgets) {
-              const result = getWidgetRectangleAndPage(widget, pages);
-              if (!result) continue;
-              const { rect, page } = result;
+          const fieldInfo = extractedFormFields?.find((f2) => f2.name === fieldName);
+          const labelFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+          for (const widget of widgets) {
+            const result = getWidgetRectangleAndPage(widget, pages);
+            if (!result) continue;
+            const { rect, page } = result;
+            if (fieldInfo && hasDrawableLabel(fieldInfo)) {
+              const labelFontSize = Math.min(10, rect.height * 0.4);
+              const labelX = rect.x;
+              const labelY = rect.y + rect.height + 5;
+              page.drawText(fieldInfo.label, {
+                x: labelX,
+                y: labelY,
+                size: labelFontSize,
+                font: labelFont,
+                color: rgb(0, 0, 0)
+              });
+            }
+            if (selectedValue && selectedValue.trim()) {
               page.drawText(selectedValue, {
                 x: rect.x + 2,
                 y: rect.y + 2,
-                size: 10,
+                size: 14,
                 font: await pdfDoc.embedFont(StandardFonts.Helvetica),
                 color: rgb(0, 0, 0)
               });
@@ -918,15 +1233,31 @@ async function fillPdfWithSignatures(pdfBytes, signatures, formFieldValues = {},
           }
         } else {
           const fieldValue = userEnteredValue ? String(userEnteredValue) : "";
-          if (fieldValue && fieldValue.trim()) {
-            for (const widget of widgets) {
-              const result = getWidgetRectangleAndPage(widget, pages);
-              if (!result) continue;
-              const { rect, page } = result;
+          const fieldInfo = extractedFormFields?.find((f2) => f2.name === fieldName);
+          const labelFont = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
+          const isDateField = fieldName.toLowerCase().includes("date") || fieldName.toLowerCase().includes("_date");
+          const fontSize = isDateField ? 14 : extractFieldFontSize(fieldName, field, extractedFormFields);
+          for (const widget of widgets) {
+            const result = getWidgetRectangleAndPage(widget, pages);
+            if (!result) continue;
+            const { rect, page } = result;
+            if (fieldInfo && hasDrawableLabel(fieldInfo)) {
+              const labelFontSize = Math.min(10, rect.height * 0.4);
+              const labelX = rect.x;
+              const labelY = rect.y + rect.height + 5;
+              page.drawText(fieldInfo.label, {
+                x: labelX,
+                y: labelY,
+                size: labelFontSize,
+                font: labelFont,
+                color: rgb(0, 0, 0)
+              });
+            }
+            if (fieldValue && fieldValue.trim()) {
               page.drawText(fieldValue, {
                 x: rect.x + 2,
                 y: rect.y + 2,
-                size: 10,
+                size: fontSize,
                 font: await pdfDoc.embedFont(StandardFonts.Helvetica),
                 color: rgb(0, 0, 0)
               });
@@ -1084,7 +1415,6 @@ async function extractVisibleFormFields(pdfBytes, currentSignerEmail) {
     const fields = form.getFields();
     const visibleFields = [];
     let hasAnyInitialsFields = false;
-    let hasInitialsFieldsForCurrentSigner = false;
     for (const field of fields) {
       const fieldName = field.getName();
       const fieldWithExtensions = field;
@@ -1110,28 +1440,31 @@ async function extractVisibleFormFields(pdfBytes, currentSignerEmail) {
           };
         })();
         let fieldType = "text" /* TEXT */;
-        const fieldTypeName = field.constructor.name;
+        const f = field;
+        const isCheckboxField = typeof f.check === "function" && typeof f.uncheck === "function";
+        const isRadioField = typeof f.select === "function" && typeof f.getOptions === "function" && typeof f.check !== "function" && typeof f.setOptions !== "function";
+        const isDropdownField = typeof f.select === "function" && (typeof f.setOptions === "function" || typeof f.addOptions === "function");
+        const isTextField = typeof f.getText === "function" && typeof f.setText === "function";
+        const isSignatureType = !isCheckboxField && !isRadioField && !isDropdownField && !isTextField;
         const cleanFieldName = fieldName.replace(/_signature$|_initials$|_date$/i, "");
-        const isActualSignatureField = fieldTypeName.includes("Signature") || cleanFieldName.toLowerCase().includes("signature") && !fieldTypeName.includes("CheckBox") && !fieldTypeName.includes("Radio");
-        const isActualInitialsField = cleanFieldName.toLowerCase().includes("initials") && !fieldTypeName.includes("CheckBox") && !fieldTypeName.includes("Radio");
+        const isActualSignatureField = isSignatureType || cleanFieldName.toLowerCase().includes("signature") && !isCheckboxField && !isRadioField;
+        const isActualInitialsField = cleanFieldName.toLowerCase().includes("initials") && !isCheckboxField && !isRadioField;
         if (isActualSignatureField) {
           fieldType = "signature" /* SIGNATURE */;
         } else if (isActualInitialsField) {
           fieldType = "initials" /* INITIALS */;
           hasAnyInitialsFields = true;
-          if (currentSignerEmail && fieldMetadata.signer === currentSignerEmail) {
-            hasInitialsFieldsForCurrentSigner = true;
-          }
         } else if (cleanFieldName.toLowerCase().includes("date")) {
           fieldType = "date" /* DATE */;
-        } else if (fieldTypeName.includes("CheckBox")) {
+        } else if (isCheckboxField) {
           fieldType = "checkbox" /* CHECKBOX */;
-        } else if (fieldTypeName.toLowerCase().includes("dropdown")) {
+        } else if (isDropdownField) {
           fieldType = "dropdown" /* DROPDOWN */;
-        } else if (fieldTypeName.includes("Radio")) {
+        } else if (isRadioField) {
           fieldType = "radio" /* RADIO */;
         }
         let displayLabel = fieldMetadata.label || "";
+        let isLabelAutoGenerated = false;
         if (!displayLabel || !displayLabel.trim()) {
           try {
             const tuLabel = extractTULabel(fieldWithExtensions);
@@ -1143,6 +1476,7 @@ async function extractVisibleFormFields(pdfBytes, currentSignerEmail) {
         }
         if (!displayLabel || !displayLabel.trim()) {
           displayLabel = generateFallbackLabel(cleanFieldName, fieldType);
+          isLabelAutoGenerated = true;
         }
         const esignField = {
           id: fieldName,
@@ -1154,6 +1488,8 @@ async function extractVisibleFormFields(pdfBytes, currentSignerEmail) {
           type: fieldType,
           label: displayLabel,
           // Use friendly label for display
+          isLabelAutoGenerated,
+          // True when label was generated from field name (should not be drawn on PDF)
           position: { x: 0, y: 0, width: 100, height: 30, page: 1 },
           // Default position
           required: fieldWithExtensions.isRequired?.() ?? false,
@@ -1174,6 +1510,13 @@ async function extractVisibleFormFields(pdfBytes, currentSignerEmail) {
             logger.warn("Error extracting options for field:", error);
           }
         }
+        try {
+          const currentValue = extractFieldValue(f, esignField.type);
+          if (currentValue) {
+            esignField.defaultValue = currentValue;
+          }
+        } catch {
+        }
         visibleFields.push(esignField);
       }
     }
@@ -1190,11 +1533,8 @@ async function extractVisibleFormFields(pdfBytes, currentSignerEmail) {
       placeholder: "Draw or upload your signature",
       assignedSignerEmail: currentSignerEmail
     });
-    const shouldCreateInitialsField = hasInitialsFieldsForCurrentSigner || hasAnyInitialsFields && !currentSignerEmail;
+    const shouldCreateInitialsField = hasAnyInitialsFields;
     if (shouldCreateInitialsField) {
-      if (hasInitialsFieldsForCurrentSigner) {
-      } else {
-      }
       mainFields.push({
         id: "initials_field_main",
         fieldId: "initials_field_main",
@@ -1281,8 +1621,12 @@ function decodeFieldName(fieldName) {
 }
 function generateFallbackLabel(decodedFieldName, fieldType) {
   let displayLabel = decodedFieldName;
-  displayLabel = displayLabel.replace(/_signature$/i, "").replace(/_initials$/i, "").replace(/_date$/i, "");
-  if (/^(text|signature|initials|date)_\d+$/i.test(displayLabel)) {
+  let prevLabel = "";
+  while (displayLabel !== prevLabel) {
+    prevLabel = displayLabel;
+    displayLabel = displayLabel.replace(/_signature$/i, "").replace(/_initials$/i, "").replace(/_date$/i, "");
+  }
+  if (/^(text|signature|initials|date|checkbox|radio|dropdown)_\d+/i.test(displayLabel)) {
     if (fieldType === "signature" /* SIGNATURE */) return "Signature";
     if (fieldType === "initials" /* INITIALS */) return "Initials";
     if (fieldType === "date" /* DATE */) return "Date";
@@ -1290,9 +1634,9 @@ function generateFallbackLabel(decodedFieldName, fieldType) {
     if (fieldType === "checkbox" /* CHECKBOX */) return "Checkbox";
     if (fieldType === "dropdown" /* DROPDOWN */) return "Dropdown";
     if (fieldType === "radio" /* RADIO */) return "Option";
-  } else {
-    displayLabel = displayLabel.replace(/_/g, " ").replace(/\s+\d+$/g, "").trim().split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+    if (fieldType === "text_label" /* TEXT_LABEL */) return "Text Label";
   }
+  displayLabel = displayLabel.replace(/_/g, " ").replace(/\s+\d+$/g, "").trim().split(" ").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
   return displayLabel;
 }
 function extractTULabel(field) {
@@ -1319,6 +1663,25 @@ function extractTULabel(field) {
     return "";
   }
 }
+function findFieldByUuid(fields, uuid) {
+  return fields.find((f) => f.fieldId === uuid);
+}
+function resolveField(fields, identifier) {
+  let field = findFieldByUuid(fields, identifier);
+  if (field) {
+    return field;
+  }
+  field = fields.find((f) => f.id === identifier);
+  if (field) {
+    return field;
+  }
+  field = fields.find((f) => f.name === identifier);
+  if (field) {
+    return field;
+  }
+  const cleanIdentifier = identifier.replace(/_signature$|_initials$|_date$/i, "");
+  return fields.find((f) => f.fieldId === cleanIdentifier || f.id === cleanIdentifier || f.name === cleanIdentifier);
+}
 
 // src/utils/audit-trail.ts
 function captureDeviceMetadata() {
@@ -1476,13 +1839,13 @@ function getErrorMessage(error, defaultMessage = "Unknown error") {
 
 // src/utils/attachment-validators.ts
 var DEFAULT_ATTACHMENT_CONSTRAINTS = {
-  maxFileSize: 10 * 1024 * 1024,
-  // 10MB
+  maxFileSize: 25 * 1024 * 1024,
+  // 25MB
   maxTotalSize: 50 * 1024 * 1024,
   // 50MB
   maxFiles: 10,
   allowedTypes: ["image/*", "application/pdf", "application/msword", "application/vnd.openxmlformats-officedocument.wordprocessingml.document"],
-  allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png", ".gif", ".doc", ".docx"]
+  allowedExtensions: [".pdf", ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp", ".doc", ".docx"]
 };
 function validateFile(file, constraints = DEFAULT_ATTACHMENT_CONSTRAINTS) {
   const errors = [];
@@ -1529,6 +1892,23 @@ function formatFileSize(bytes) {
   const i = Math.floor(Math.log(bytes) / Math.log(k));
   return Math.round(bytes / Math.pow(k, i) * 100) / 100 + " " + sizes[i];
 }
+function isValidISODate(value) {
+  if (!value || typeof value !== "string") {
+    return false;
+  }
+  const isoPattern = /^\d{4}-\d{2}-\d{2}$/;
+  if (!isoPattern.test(value)) {
+    return false;
+  }
+  try {
+    const date = parseISO(value);
+    return isValid(date) && !isNaN(date.getTime());
+  } catch {
+    return false;
+  }
+}
+
+// src/utils/date-validation.ts
 function toIsoDateString(date) {
   const year = date.getFullYear();
   const month = String(date.getMonth() + 1).padStart(2, "0");
@@ -1652,21 +2032,6 @@ function parseAndValidateDate(value) {
     error: `Invalid date format: "${trimmedValue}". Please use a date picker or format like MM/DD/YYYY.`
   };
 }
-function isValidISODate(value) {
-  if (!value || typeof value !== "string") {
-    return false;
-  }
-  const isoPattern = /^\d{4}-\d{2}-\d{2}$/;
-  if (!isoPattern.test(value)) {
-    return false;
-  }
-  try {
-    const date = parseISO(value);
-    return isValid(date) && !isNaN(date.getTime());
-  } catch {
-    return false;
-  }
-}
 
 // src/utils/tracking.ts
 var DEFAULT_API_ENDPOINT = "https://api-dev.signiphi.ai";
@@ -1745,6 +2110,79 @@ var PdfViewerCore = forwardRef(
       }
       return PDFViewerApplication;
     }, [getPDFViewerApplication]);
+    const fieldMetadataRef = useRef([]);
+    const setFieldMetadata = useCallback((fields) => {
+      fieldMetadataRef.current = fields;
+      logger.info("[FIELD METADATA] Updated field metadata:", fields.map((f) => ({ name: f.name, fontSize: f.fontSize, type: f.type })));
+    }, []);
+    const extractFieldFontSizes = useCallback(async () => {
+      const fontSizeMap = {};
+      for (const field of fieldMetadataRef.current) {
+        if (field.type === "text" /* TEXT */) {
+          if (field.fontSize && field.fontSize >= 8 && field.fontSize <= 72) {
+            fontSizeMap[field.name] = field.fontSize;
+          }
+        }
+      }
+      if (Object.keys(fontSizeMap).length === 0) {
+        try {
+          const PDFViewerApplication = await waitForInitialization();
+          if (PDFViewerApplication?.pdfDocument?.getFieldObjects) {
+            const fieldObjects = await PDFViewerApplication.pdfDocument.getFieldObjects();
+            for (const [fieldName, fields] of Object.entries(fieldObjects)) {
+              const fieldArray = fields;
+              for (const field of fieldArray) {
+                if (field.alternateText) {
+                  const match = field.alternateText.match(/\|fontSize:(\d+)$/);
+                  if (match) {
+                    fontSizeMap[fieldName] = parseInt(match[1], 10);
+                    break;
+                  }
+                }
+              }
+            }
+          }
+        } catch (error) {
+          logger.warn("[FONT SIZE] Error extracting from PDF:", error);
+        }
+      }
+      return fontSizeMap;
+    }, [waitForInitialization]);
+    const injectFormFieldFontSizeCSS = useCallback(async (doc) => {
+      const styleId = "signiphi-pdf-font-size-style";
+      const existingStyle = doc.getElementById(styleId);
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+      const fontSizeMap = await extractFieldFontSizes();
+      const cssRules = [];
+      for (const [fieldName, fontSize] of Object.entries(fontSizeMap)) {
+        cssRules.push(`
+      input[name="${fieldName}"],
+      input[name="${fieldName}_date"],
+      select[name="${fieldName}"] {
+        font-size: ${fontSize}px !important;
+      }
+    `);
+      }
+      cssRules.push(`
+    input[data-element-id][name*="date"],
+    select[data-element-id] {
+      font-size: 18px !important;
+    }
+  `);
+      cssRules.push(`
+    input[type="text"][data-element-id]:not([style*="font-size"]),
+    select[data-element-id]:not([style*="font-size"]) {
+      font-size: 12px !important; /* Default fallback */
+    }
+  `);
+      const style = doc.createElement("style");
+      style.id = styleId;
+      style.textContent = `/* Dynamic font sizes from PDF metadata */
+${cssRules.join("\n")}`;
+      doc.head.appendChild(style);
+    }, [extractFieldFontSizes]);
     const loadPdf = useCallback(
       async (pdfUrl) => {
         const iframe = iframeRef.current;
@@ -1775,7 +2213,10 @@ var PdfViewerCore = forwardRef(
               try {
                 const PDFViewerApplication = getPDFViewerApplication();
                 if (PDFViewerApplication && PDFViewerApplication.initializedPromise) {
-                  PDFViewerApplication.initializedPromise.then(() => {
+                  PDFViewerApplication.initializedPromise.then(async () => {
+                    if (iframe.contentDocument) {
+                      await injectFormFieldFontSizeCSS(iframe.contentDocument);
+                    }
                     resolve();
                   }).catch(reject);
                 } else {
@@ -1855,6 +2296,7 @@ var PdfViewerCore = forwardRef(
             }
           }
           logger.info(`[RADIO DETECT] Found ${Object.keys(radioGroups).length} radio groups:`, Object.keys(radioGroups));
+          const processedRadioFieldNames = new Set(Object.keys(radioGroups));
           for (const [fieldName, radioButtons] of Object.entries(radioGroups)) {
             const selectedRadio = radioButtons.find(
               (rb) => rb.data && typeof rb.data === "object" && rb.data.value === true
@@ -1880,7 +2322,7 @@ var PdfViewerCore = forwardRef(
           }
           for (const [id, data] of Object.entries(storedData)) {
             const fieldName = idToNameMap[id];
-            if (fieldName && values[fieldName]) {
+            if (fieldName && (fieldName in values || processedRadioFieldNames.has(fieldName))) {
               continue;
             }
             if (fieldName) {
@@ -1897,13 +2339,13 @@ var PdfViewerCore = forwardRef(
               } else if (data !== void 0 && data !== null) {
                 extractedValue = String(data);
               }
-              if (extractedValue !== void 0 && extractedValue !== "") {
+              if (extractedValue !== void 0) {
                 values[fieldName] = extractedValue;
               }
             }
           }
           for (const [name, fields] of Object.entries(fieldObjects)) {
-            if (!values[name]) {
+            if (!(name in values)) {
               const fieldArray = fields;
               const field = fieldArray[0];
               if (field && field.value !== void 0 && field.value !== null) {
@@ -2104,6 +2546,8 @@ var PdfViewerCore = forwardRef(
         }
       }, 1e3);
     }, []);
+    const injectRadioLabels = useCallback((_fields) => {
+    }, []);
     const zoomIn = useCallback(async () => {
       try {
         const PDFViewerApplication = await waitForInitialization();
@@ -2174,7 +2618,7 @@ var PdfViewerCore = forwardRef(
         return null;
       }
     }, [waitForInitialization]);
-    const attachFieldClickInterceptors = useCallback((onFieldClick) => {
+    const attachFieldClickInterceptors = useCallback(async (onFieldClick) => {
       const iframe = iframeRef.current;
       if (!iframe?.contentDocument) {
         logger.warn("Cannot attach field interceptors: iframe not ready");
@@ -2182,6 +2626,7 @@ var PdfViewerCore = forwardRef(
       }
       try {
         const doc = iframe.contentDocument;
+        await injectFormFieldFontSizeCSS(doc);
         const clickHighlightStyleId = "signiphi-click-highlight-style";
         if (!doc.getElementById(clickHighlightStyleId)) {
           const style = doc.createElement("style");
@@ -2252,7 +2697,7 @@ var PdfViewerCore = forwardRef(
             return;
           }
           logger.info(`Field click intercepted: ${fieldName}`, e.type);
-          const shouldProceed = onFieldClick(fieldName);
+          const shouldProceed = onFieldClick(fieldName, target);
           logger.info(`Field ${fieldName} shouldProceed: ${shouldProceed}`);
           if (e.type !== "pointerdown" && e.type !== "mousedown") {
             if (!shouldProceed) {
@@ -2328,6 +2773,57 @@ var PdfViewerCore = forwardRef(
         logger.error("Error attaching field click interceptors:", error);
       }
     }, []);
+    const attachFieldChangeListeners = useCallback(async (onFieldChange) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) {
+          logger.warn("Cannot attach field change listeners: iframe not ready");
+          return () => {
+          };
+        }
+        const doc = iframe.contentDocument;
+        const handleChange = (event) => {
+          const target = event.target;
+          if (!target || !["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName)) {
+            return;
+          }
+          const fieldName = target.getAttribute("name") || target.getAttribute("data-element-id") || target.getAttribute("id") || "";
+          if (!fieldName) return;
+          let value = "";
+          if (target.tagName === "INPUT") {
+            const inputElement = target;
+            if (inputElement.type === "checkbox") {
+              value = inputElement.checked ? "true" : "false";
+            } else if (inputElement.type === "radio") {
+              if (inputElement.checked) {
+                value = inputElement.value || "true";
+              } else {
+                return;
+              }
+            } else {
+              value = inputElement.value;
+            }
+          } else if (target.tagName === "SELECT") {
+            value = target.value;
+          } else if (target.tagName === "TEXTAREA") {
+            value = target.value;
+          }
+          onFieldChange(fieldName, value, target);
+        };
+        doc.addEventListener("change", handleChange, true);
+        doc.addEventListener("input", handleChange, true);
+        logger.info("Attached field change listeners to iframe document");
+        return () => {
+          doc.removeEventListener("change", handleChange, true);
+          doc.removeEventListener("input", handleChange, true);
+          logger.info("Removed field change listeners from iframe document");
+        };
+      } catch (error) {
+        logger.error("Error attaching field change listeners:", error);
+        return () => {
+        };
+      }
+    }, []);
     const addFieldIndicator = useCallback(async (fieldName, indicatorType = "completed", allowedFieldIds) => {
       try {
         const iframe = iframeRef.current;
@@ -2543,41 +3039,310 @@ var PdfViewerCore = forwardRef(
         logger.error("Error removing field indicator:", error);
       }
     }, []);
-    useEffect(() => {
-      if (!versionChecked) {
-        const config = getPdfJsConfig();
-        const basePath = pdfjsBasePath ?? config.viewerBasePath;
-        checkPdfJsVersion(basePath).then((result) => {
-          setVersionChecked(true);
-          if (!result.viewerExists) {
-            const errorMsg = `\u26A0\uFE0F PDF.js files not found
-
-The PDF viewer requires PDF.js files to be installed.
-This should happen automatically, but you can run:
-
-  npx signiphi-setup
-
-Or reinstall the package:
-
-  npm install @signiphi/pdf-signer`;
-            setSetupError(errorMsg);
-            logger.error(errorMsg);
-          } else if (!result.versionMatch) {
-            logger.warn(
-              `\u26A0\uFE0F PDF.js version mismatch:
-  Viewer: ${result.viewerVersion}
-  Worker: ${result.workerVersion}
-Run: npx signiphi-setup to sync versions`
-            );
+    const addDateFieldIndicator = useCallback((fieldName) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) {
+          logger.warn("Cannot add date field indicator: iframe not ready");
+          return;
+        }
+        const doc = iframe.contentDocument;
+        const formElement = doc.querySelector(
+          `input[name="${fieldName}"], input[data-element-id="${fieldName}"], textarea[name="${fieldName}"], textarea[data-element-id="${fieldName}"]`
+        );
+        if (!formElement) {
+          logger.warn(`Cannot add date indicator: field not found for "${fieldName}"`);
+          return;
+        }
+        const annotationSection = formElement.closest("section");
+        if (!annotationSection) {
+          logger.warn(`Cannot add date indicator: no annotation section for "${fieldName}"`);
+          return;
+        }
+        const existingIndicator = annotationSection.querySelector(".signiphi-date-field-indicator");
+        if (existingIndicator) {
+          existingIndicator.remove();
+        }
+        const indicator = doc.createElement("div");
+        indicator.className = "signiphi-date-field-indicator";
+        indicator.setAttribute("role", "button");
+        indicator.setAttribute("aria-label", "Open calendar picker");
+        indicator.setAttribute("tabindex", "0");
+        indicator.innerHTML = `
+          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect x="2" y="3" width="14" height="13" rx="2" stroke="#6b7280" stroke-width="1.5" fill="white"/>
+            <line x1="2" y1="6.5" x2="16" y2="6.5" stroke="#6b7280" stroke-width="1.5"/>
+            <line x1="5.5" y1="1" x2="5.5" y2="5" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round"/>
+            <line x1="12.5" y1="1" x2="12.5" y2="5" stroke="#6b7280" stroke-width="1.5" stroke-linecap="round"/>
+            <circle cx="5.5" cy="9.5" r="0.8" fill="#6b7280"/>
+            <circle cx="9" cy="9.5" r="0.8" fill="#6b7280"/>
+            <circle cx="12.5" cy="9.5" r="0.8" fill="#6b7280"/>
+            <circle cx="5.5" cy="12.5" r="0.8" fill="#6b7280"/>
+            <circle cx="9" cy="12.5" r="0.8" fill="#6b7280"/>
+            <circle cx="12.5" cy="12.5" r="0.8" fill="#6b7280"/>
+          </svg>
+        `;
+        Object.assign(indicator.style, {
+          position: "absolute",
+          top: "50%",
+          right: "4px",
+          transform: "translateY(-50%)",
+          width: "24px",
+          height: "24px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: "1000",
+          cursor: "pointer",
+          opacity: "0.7",
+          transition: "opacity 0.2s ease-in-out",
+          pointerEvents: "auto",
+          padding: "3px",
+          borderRadius: "4px"
+        });
+        indicator.addEventListener("mouseenter", () => {
+          indicator.style.opacity = "1";
+          indicator.style.backgroundColor = "#f3f4f6";
+        });
+        indicator.addEventListener("mouseleave", () => {
+          indicator.style.opacity = "0.7";
+          indicator.style.backgroundColor = "transparent";
+        });
+        indicator.addEventListener("keydown", (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            indicator.click();
           }
-        }).catch((error) => {
-          logger.error("Failed to check PDF.js version:", error);
-          setVersionChecked(true);
         });
+        const currentPosition = window.getComputedStyle(annotationSection).position;
+        if (currentPosition === "static") {
+          annotationSection.style.position = "relative";
+        }
+        annotationSection.appendChild(indicator);
+        logger.info(`Added date field indicator for: ${fieldName}`);
+      } catch (error) {
+        logger.error("Error adding date field indicator:", error);
       }
-    }, [pdfjsBasePath, versionChecked]);
-    const handleIframeLoad = useCallback(() => {
-      const iframe = iframeRef.current;
+    }, []);
+    const removeDateFieldIndicator = useCallback((fieldName) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) return;
+        const doc = iframe.contentDocument;
+        const formElement = doc.querySelector(
+          `input[name="${fieldName}"], input[data-element-id="${fieldName}"], textarea[name="${fieldName}"], textarea[data-element-id="${fieldName}"]`
+        );
+        if (!formElement) return;
+        const annotationSection = formElement.closest("section");
+        if (!annotationSection) return;
+        const indicator = annotationSection.querySelector(".signiphi-date-field-indicator");
+        if (indicator) {
+          indicator.remove();
+          logger.info(`Removed date field indicator from: ${fieldName}`);
+        }
+      } catch (error) {
+        logger.error("Error removing date field indicator:", error);
+      }
+    }, []);
+    const findFieldElements = useCallback((fieldName) => {
+      const iframe = iframeRef.current;
+      if (!iframe?.contentDocument) return [];
+      const doc = iframe.contentDocument;
+      const targetElements = [];
+      if (fieldName === "signature_field_main") {
+        const allInputs = doc.querySelectorAll("input[name], input[data-element-id]");
+        allInputs.forEach((input) => {
+          const name = input.getAttribute("name") || input.getAttribute("data-element-id") || "";
+          if (name.toLowerCase().includes("signature") && !name.toLowerCase().includes("initials")) {
+            targetElements.push(input);
+          }
+        });
+      } else if (fieldName === "initials_field_main") {
+        const allInputs = doc.querySelectorAll("input[name], input[data-element-id]");
+        allInputs.forEach((input) => {
+          const name = input.getAttribute("name") || input.getAttribute("data-element-id") || "";
+          if (name.toLowerCase().includes("initials")) {
+            targetElements.push(input);
+          }
+        });
+      } else {
+        const formElement = doc.querySelector(
+          `input[name="${fieldName}"], input[data-element-id="${fieldName}"]`
+        );
+        if (formElement) {
+          targetElements.push(formElement);
+        }
+      }
+      return targetElements;
+    }, []);
+    const previewSignature = useCallback((fieldName, dataUrl) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) {
+          logger.warn("Cannot preview signature: iframe not ready");
+          return;
+        }
+        const doc = iframe.contentDocument;
+        const targetElements = findFieldElements(fieldName);
+        targetElements.forEach((formElement) => {
+          const annotationSection = formElement.closest("section");
+          if (!annotationSection) return;
+          const existing = annotationSection.querySelector(".signiphi-signature-preview");
+          if (existing) existing.remove();
+          if (!dataUrl) return;
+          const preview = doc.createElement("div");
+          preview.className = "signiphi-signature-preview";
+          preview.setAttribute("aria-hidden", "true");
+          const img = doc.createElement("img");
+          img.src = dataUrl;
+          img.alt = "";
+          Object.assign(img.style, {
+            width: "100%",
+            height: "100%",
+            objectFit: "contain",
+            pointerEvents: "none"
+          });
+          preview.appendChild(img);
+          Object.assign(preview.style, {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: "999",
+            pointerEvents: "none",
+            padding: "2px",
+            boxSizing: "border-box",
+            backgroundColor: "rgba(255, 255, 255, 0.85)",
+            opacity: "0",
+            transition: "opacity 0.3s ease-in-out"
+          });
+          const currentPosition = annotationSection.style.position || getComputedStyle(annotationSection).position;
+          if (currentPosition === "static" || !currentPosition) {
+            annotationSection.style.position = "relative";
+          }
+          annotationSection.appendChild(preview);
+          requestAnimationFrame(() => {
+            preview.style.opacity = "1";
+          });
+        });
+        logger.info(`Previewed signature on ${targetElements.length} field(s) for: ${fieldName}`);
+      } catch (error) {
+        logger.error("Error previewing signature:", error);
+      }
+    }, [findFieldElements]);
+    const previewInitials = useCallback((fieldName, text) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) {
+          logger.warn("Cannot preview initials: iframe not ready");
+          return;
+        }
+        const doc = iframe.contentDocument;
+        const targetElements = findFieldElements(fieldName);
+        targetElements.forEach((formElement) => {
+          const annotationSection = formElement.closest("section");
+          if (!annotationSection) return;
+          const existing = annotationSection.querySelector(".signiphi-initials-preview");
+          if (existing) existing.remove();
+          if (!text) return;
+          const preview = doc.createElement("div");
+          preview.className = "signiphi-initials-preview";
+          preview.setAttribute("aria-hidden", "true");
+          preview.textContent = text;
+          Object.assign(preview.style, {
+            position: "absolute",
+            top: "0",
+            left: "0",
+            width: "100%",
+            height: "100%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: "999",
+            pointerEvents: "none",
+            fontFamily: "'Dancing Script', 'Brush Script MT', cursive",
+            fontStyle: "italic",
+            fontSize: "70%",
+            color: "#000000",
+            backgroundColor: "rgba(255, 255, 255, 0.85)",
+            overflow: "hidden",
+            opacity: "0",
+            transition: "opacity 0.3s ease-in-out"
+          });
+          const currentPosition = annotationSection.style.position || getComputedStyle(annotationSection).position;
+          if (currentPosition === "static" || !currentPosition) {
+            annotationSection.style.position = "relative";
+          }
+          annotationSection.appendChild(preview);
+          requestAnimationFrame(() => {
+            preview.style.opacity = "1";
+          });
+        });
+        logger.info(`Previewed initials on ${targetElements.length} field(s) for: ${fieldName}`);
+      } catch (error) {
+        logger.error("Error previewing initials:", error);
+      }
+    }, [findFieldElements]);
+    const clearFieldPreviews = useCallback((fieldName) => {
+      try {
+        const iframe = iframeRef.current;
+        if (!iframe?.contentDocument) return;
+        const doc = iframe.contentDocument;
+        const selectors = ".signiphi-signature-preview, .signiphi-initials-preview";
+        if (fieldName) {
+          const targetElements = findFieldElements(fieldName);
+          targetElements.forEach((el) => {
+            const section = el.closest("section");
+            if (section) {
+              section.querySelectorAll(selectors).forEach((p) => p.remove());
+            }
+          });
+        } else {
+          doc.querySelectorAll(selectors).forEach((el) => el.remove());
+        }
+      } catch (error) {
+        logger.error("Error clearing field previews:", error);
+      }
+    }, [findFieldElements]);
+    useEffect(() => {
+      if (!versionChecked) {
+        const config = getPdfJsConfig();
+        const basePath = pdfjsBasePath ?? config.viewerBasePath;
+        checkPdfJsVersion(basePath).then((result) => {
+          setVersionChecked(true);
+          if (!result.viewerExists) {
+            const errorMsg = `\u26A0\uFE0F PDF.js files not found
+
+The PDF viewer requires PDF.js files to be installed.
+This should happen automatically, but you can run:
+
+  npx signiphi-setup
+
+Or reinstall the package:
+
+  npm install @signiphi/pdf-signer`;
+            setSetupError(errorMsg);
+            logger.error(errorMsg);
+          } else if (!result.versionMatch) {
+            logger.warn(
+              `\u26A0\uFE0F PDF.js version mismatch:
+  Viewer: ${result.viewerVersion}
+  Worker: ${result.workerVersion}
+Run: npx signiphi-setup to sync versions`
+            );
+          }
+        }).catch((error) => {
+          logger.error("Failed to check PDF.js version:", error);
+          setVersionChecked(true);
+        });
+      }
+    }, [pdfjsBasePath, versionChecked]);
+    const handleIframeLoad = useCallback(() => {
+      const iframe = iframeRef.current;
       if (!iframe || !iframe.contentWindow) {
         return;
       }
@@ -2604,22 +3369,14 @@ Or check your configuration.`;
               await initializationPromise.current;
               isLoadingRef.current = false;
               onLoad?.();
-            } else {
-              const PDFViewerApplication = getPDFViewerApplication();
-              if (PDFViewerApplication) {
-                isLoadingRef.current = false;
-                onLoad?.();
-              } else {
-                throw new Error("PDFViewerApplication not found after iframe load");
-              }
             }
           } catch (error) {
-            const errorMessage = error instanceof Error ? error.message : "Unknown error loading PDF viewer";
-            logger.error("Error in PDF.js initialization:", error);
+            const errorMessage = error instanceof Error ? error.message : "Failed to load PDF viewer";
+            logger.error("Error in handleIframeLoad:", errorMessage);
             isLoadingRef.current = false;
             onError?.(errorMessage);
           }
-        }, 1e3);
+        }, 100);
       } catch (error) {
         const errorMessage = error instanceof Error ? error.message : "Unknown error in iframe load handler";
         logger.error("Error in iframe load handler:", error);
@@ -2637,6 +3394,8 @@ Or check your configuration.`;
         saveDocument,
         getPDFViewerApplication,
         injectPlaceholders,
+        injectRadioLabels,
+        setFieldMetadata,
         zoomIn,
         zoomOut,
         nextPage,
@@ -2644,10 +3403,16 @@ Or check your configuration.`;
         getCurrentPage,
         getTotalPages,
         attachFieldClickInterceptors,
+        attachFieldChangeListeners,
         addFieldIndicator,
-        removeFieldIndicator
+        removeFieldIndicator,
+        addDateFieldIndicator,
+        removeDateFieldIndicator,
+        previewSignature,
+        previewInitials,
+        clearFieldPreviews
       }),
-      [loadPdf, getFormFieldValues, setFormFieldValues, getAllFieldNames, saveDocument, getPDFViewerApplication, injectPlaceholders, zoomIn, zoomOut, nextPage, previousPage, getCurrentPage, getTotalPages, attachFieldClickInterceptors, addFieldIndicator, removeFieldIndicator]
+      [loadPdf, getFormFieldValues, setFormFieldValues, getAllFieldNames, saveDocument, getPDFViewerApplication, injectPlaceholders, injectRadioLabels, setFieldMetadata, zoomIn, zoomOut, nextPage, previousPage, getCurrentPage, getTotalPages, attachFieldClickInterceptors, attachFieldChangeListeners, addFieldIndicator, removeFieldIndicator, addDateFieldIndicator, removeDateFieldIndicator, previewSignature, previewInitials, clearFieldPreviews]
     );
     return /* @__PURE__ */ jsx(Fragment, { children: children({ iframeRef, handleIframeLoad }) });
   }
@@ -2936,7 +3701,7 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React8.forwardRef(
+var Button = React9.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
     return /* @__PURE__ */ jsx(
@@ -3044,9 +3809,171 @@ var SignatureCanvas = forwardRef(
   }
 );
 SignatureCanvas.displayName = "SignatureCanvas";
+var Input = React9.forwardRef(
+  ({ className, type, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        type,
+        className: cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+function SignatureTypeInput({
+  onSave,
+  onCancel,
+  width = 450,
+  height = 200,
+  initialText = "",
+  initialFont,
+  className
+}) {
+  const resolvedInitialFont = initialFont ?? DEFAULT_SIGNATURE_FONT;
+  const [text, setText] = useState(initialText);
+  const [selectedFont, setSelectedFont] = useState(resolvedInitialFont);
+  const [fontsReady, setFontsReady] = useState(false);
+  const [previewDataUrl, setPreviewDataUrl] = useState(null);
+  const previewCanvasRef = useRef(null);
+  useEffect(() => {
+    loadSignatureFonts().then(() => {
+      setFontsReady(true);
+    }).catch((error) => {
+      console.error("Failed to load signature fonts:", error);
+      setFontsReady(true);
+    });
+  }, []);
+  useEffect(() => {
+    if (!fontsReady || !text.trim()) {
+      setPreviewDataUrl(null);
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      try {
+        const dataUrl = generateSignatureFromText({
+          text: text.trim(),
+          fontFamily: selectedFont.family,
+          width,
+          height
+        });
+        setPreviewDataUrl(dataUrl);
+      } catch (error) {
+        console.error("Failed to generate signature preview:", error);
+        setPreviewDataUrl(null);
+      }
+    }, 50);
+    return () => clearTimeout(timeoutId);
+  }, [text, selectedFont, fontsReady, width, height]);
+  const handleTextChange = useCallback(
+    (e) => {
+      setText(e.target.value);
+    },
+    []
+  );
+  const handleFontSelect = useCallback((font) => {
+    setSelectedFont(font);
+  }, []);
+  const handleSave = useCallback(() => {
+    if (!text.trim() || !previewDataUrl) {
+      return;
+    }
+    onSave(previewDataUrl);
+  }, [text, previewDataUrl, onSave]);
+  const hasValidSignature = text.trim().length > 0 && previewDataUrl !== null;
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: "signature-text",
+          className: "text-sm font-medium text-foreground",
+          children: "Enter your name:"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          id: "signature-text",
+          type: "text",
+          value: text,
+          onChange: handleTextChange,
+          placeholder: "Type your name here",
+          maxLength: 50,
+          autoComplete: "off",
+          className: "text-base"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-foreground", children: "Select style:" }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: SIGNATURE_FONTS.map((font) => /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: selectedFont.name === font.name ? "default" : "outline",
+          size: "sm",
+          onClick: () => handleFontSelect(font),
+          className: "text-xs md:text-sm",
+          style: {
+            fontFamily: fontsReady ? `"${font.family}", cursive` : void 0
+          },
+          children: font.label
+        },
+        font.name
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-foreground", children: "Preview:" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "border-2 border-dashed border-border rounded-lg bg-muted/30 flex items-center justify-center overflow-hidden",
+          style: { minHeight: Math.min(height, 150), maxHeight: height },
+          children: !fontsReady ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Loading fonts..." }) : !text.trim() ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Start typing to see preview" }) : previewDataUrl ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: previewDataUrl,
+              alt: "Signature preview",
+              className: "max-w-full max-h-full object-contain"
+            }
+          ) : /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Generating preview..." })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("canvas", { ref: previewCanvasRef, className: "hidden" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          onClick: onCancel,
+          className: "flex-1",
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          onClick: handleSave,
+          disabled: !hasValidSignature,
+          className: "flex-1 font-semibold",
+          children: "Save Signature"
+        }
+      )
+    ] })
+  ] }) });
+}
 var Dialog = DialogPrimitive.Root;
 var DialogPortal = DialogPrimitive.Portal;
-var DialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "signiphi-pdf-signer", children: /* @__PURE__ */ jsx(
+var DialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { className: "signiphi-pdf-signer", children: /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
     ref,
@@ -3058,7 +3985,7 @@ var DialogOverlay = React8.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ) }));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+var DialogContent = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
   /* @__PURE__ */ jsx(DialogOverlay, {}),
   /* @__PURE__ */ jsx("div", { className: "signiphi-pdf-signer", children: /* @__PURE__ */ jsxs(
     DialogPrimitive.Content,
@@ -3108,7 +4035,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Title,
   {
     ref,
@@ -3120,7 +4047,7 @@ var DialogTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var DialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Description,
   {
     ref,
@@ -3136,6 +4063,7 @@ function SignatureModalCore({
   fieldLabel
 }) {
   const canvasRef = useRef(null);
+  const [activeTab, setActiveTab] = useState("draw");
   const [uploadedImage, setUploadedImage] = useState(null);
   const [uploadError, setUploadError] = useState(null);
   const fileInputRef = useRef(null);
@@ -3193,10 +4121,30 @@ function SignatureModalCore({
       onClose();
     }
   }, [uploadedImage, onSave, onClose]);
+  const handleTabChange = useCallback((tab) => {
+    setActiveTab(tab);
+  }, []);
   const canvasWidth = 450;
   const canvasHeight = 200;
   const mobileCanvasWidth = 320;
   const mobileCanvasHeight = 150;
+  const tabs = [
+    {
+      id: "draw",
+      label: "Draw",
+      icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" }) })
+    },
+    {
+      id: "upload",
+      label: "Upload",
+      icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) })
+    },
+    {
+      id: "type",
+      label: "Type",
+      icon: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" }) })
+    }
+  ];
   return /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
     /* @__PURE__ */ jsxs(DialogHeader, { className: "space-y-2 md:space-y-3", children: [
       /* @__PURE__ */ jsx(DialogTitle, { className: "text-lg md:text-xl font-semibold", children: "Sign Document" }),
@@ -3206,110 +4154,163 @@ function SignatureModalCore({
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 md:gap-6", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsxs(
-          Button,
-          {
-            type: "button",
-            variant: "outline",
-            onClick: handleUploadClick,
-            className: "flex-1 text-xs md:text-sm h-9 md:h-10",
-            children: [
-              /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) }),
-              "Upload Image"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "input",
+      /* @__PURE__ */ jsx("div", { className: "flex gap-1 p-1 bg-muted rounded-lg", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: activeTab === tab.id ? "default" : "ghost",
+          size: "sm",
+          onClick: () => handleTabChange(tab.id),
+          className: `flex-1 gap-1.5 text-xs md:text-sm ${activeTab === tab.id ? "" : "hover:bg-background/50"}`,
+          children: [
+            tab.icon,
+            tab.label
+          ]
+        },
+        tab.id
+      )) }),
+      activeTab === "draw" && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "block sm:hidden", children: /* @__PURE__ */ jsx(
+          SignatureCanvas,
           {
-            ref: fileInputRef,
-            type: "file",
-            accept: "image/png,image/jpeg,image/jpg",
-            className: "hidden",
-            onChange: handleFileChange
+            ref: canvasRef,
+            width: mobileCanvasWidth,
+            height: mobileCanvasHeight,
+            title: "Sign Document",
+            onSignature: handleSave,
+            onCancel: handleCancel,
+            showActions: true
           }
-        ),
-        uploadedImage && /* @__PURE__ */ jsx(
-          Button,
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx(
+          SignatureCanvas,
           {
-            type: "button",
-            variant: "outline",
-            onClick: handleClearUpload,
-            className: "text-xs md:text-sm h-9 md:h-10",
-            children: "Clear"
+            ref: canvasRef,
+            width: canvasWidth,
+            height: canvasHeight,
+            title: "Sign Document",
+            onSignature: handleSave,
+            onCancel: handleCancel,
+            showActions: true
           }
-        )
-      ] }),
-      !uploadedImage && /* @__PURE__ */ jsx("p", { className: "text-xs md:text-sm text-muted-foreground text-center -mt-2 md:-mt-4", children: "Supported formats: PNG, JPEG \u2022 Maximum size: 5MB" }),
-      uploadError && /* @__PURE__ */ jsxs("div", { className: "bg-destructive/10 border border-destructive/30 text-destructive text-xs md:text-sm p-2 md:p-3 rounded-lg flex items-start gap-2", children: [
-        /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 md:w-4 md:h-4 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
-        /* @__PURE__ */ jsx("span", { children: uploadError })
+        ) })
       ] }),
-      uploadedImage ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:gap-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "border-2 border-primary/20 rounded-lg p-3 md:p-6 flex justify-center bg-muted/20", children: /* @__PURE__ */ jsx(
-          "img",
-          {
-            src: uploadedImage,
-            alt: "Uploaded signature preview",
-            className: "max-w-full",
-            style: {
-              maxWidth: canvasWidth,
-              maxHeight: canvasHeight,
-              objectFit: "contain"
+      activeTab === "upload" && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: handleUploadClick,
+              className: "flex-1 text-xs md:text-sm h-9 md:h-10",
+              children: [
+                /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 md:w-4 md:h-4 mr-1.5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" }) }),
+                "Choose Image"
+              ]
             }
-          }
-        ) }),
-        /* @__PURE__ */ jsx(Button, { onClick: handleSaveUpload, size: "lg", className: "font-semibold text-sm md:text-base h-10 md:h-11", children: "Save Signature" })
-      ] }) : /* @__PURE__ */ jsx("div", { className: "block sm:hidden", children: /* @__PURE__ */ jsx(
-        SignatureCanvas,
+          ),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept: "image/png,image/jpeg,image/jpg",
+              className: "hidden",
+              onChange: handleFileChange
+            }
+          ),
+          uploadedImage && /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: handleClearUpload,
+              className: "text-xs md:text-sm h-9 md:h-10",
+              children: "Clear"
+            }
+          )
+        ] }),
+        !uploadedImage && /* @__PURE__ */ jsx("p", { className: "text-xs md:text-sm text-muted-foreground text-center", children: "Supported formats: PNG, JPEG (Max 5MB)" }),
+        uploadError && /* @__PURE__ */ jsxs("div", { className: "bg-destructive/10 border border-destructive/30 text-destructive text-xs md:text-sm p-2 md:p-3 rounded-lg flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx("svg", { className: "w-3.5 h-3.5 md:w-4 md:h-4 mt-0.5 flex-shrink-0", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+          /* @__PURE__ */ jsx("span", { children: uploadError })
+        ] }),
+        uploadedImage ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:gap-4", children: [
+          /* @__PURE__ */ jsx("div", { className: "border-2 border-primary/20 rounded-lg p-3 md:p-6 flex justify-center bg-muted/20", children: /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: uploadedImage,
+              alt: "Uploaded signature preview",
+              className: "max-w-full",
+              style: {
+                maxWidth: canvasWidth,
+                maxHeight: canvasHeight,
+                objectFit: "contain"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                onClick: handleCancel,
+                className: "flex-1",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: handleSaveUpload,
+                className: "flex-1 font-semibold",
+                children: "Save Signature"
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 md:gap-4", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "border-2 border-dashed border-border rounded-lg flex items-center justify-center bg-muted/30",
+              style: { minHeight: mobileCanvasHeight },
+              children: /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: "Upload an image of your signature" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                onClick: handleCancel,
+                className: "flex-1",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { disabled: true, className: "flex-1 font-semibold", children: "Save Signature" })
+          ] })
+        ] })
+      ] }),
+      activeTab === "type" && /* @__PURE__ */ jsx(
+        SignatureTypeInput,
         {
-          ref: canvasRef,
-          width: mobileCanvasWidth,
-          height: mobileCanvasHeight,
-          title: "Sign Document",
-          onSignature: handleSave,
+          onSave: handleSave,
           onCancel: handleCancel,
-          showActions: true
-        }
-      ) }),
-      !uploadedImage && /* @__PURE__ */ jsx("div", { className: "hidden sm:block", children: /* @__PURE__ */ jsx(
-        SignatureCanvas,
-        {
-          ref: canvasRef,
           width: canvasWidth,
-          height: canvasHeight,
-          title: "Sign Document",
-          onSignature: handleSave,
-          onCancel: handleCancel,
-          showActions: true
+          height: canvasHeight
         }
-      ) })
+      )
     ] })
   ] }) });
 }
 var SignatureModal = SignatureModalCore;
-var Input = React8.forwardRef(
-  ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
-      "input",
-      {
-        type,
-        className: cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
-          className
-        ),
-        ref,
-        ...props
-      }
-    );
-  }
-);
-Input.displayName = "Input";
 var labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Label = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   LabelPrimitive.Root,
   {
     ref,
@@ -3390,7 +4391,7 @@ function InitialsModal({
     ] })
   ] }) });
 }
-var Card = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Card = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3402,7 +4403,7 @@ var Card = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ j
   }
 ));
 Card.displayName = "Card";
-var CardHeader = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardHeader = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3411,7 +4412,7 @@ var CardHeader = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3420,7 +4421,7 @@ var CardTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3429,9 +4430,9 @@ var CardDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-6", className), ...props }));
+var CardContent = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("px-6", className), ...props }));
 CardContent.displayName = "CardContent";
-var CardFooter = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3594,7 +4595,7 @@ function TextFieldRenderer({
 }
 var Select = SelectPrimitive.Root;
 var SelectValue = SelectPrimitive.Value;
-var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectTrigger = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -3610,7 +4611,7 @@ var SelectTrigger = React8.forwardRef(({ className, children, ...props }, ref) =
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollUpButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -3623,7 +4624,7 @@ var SelectScrollUpButton = React8.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectScrollDownButton = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -3636,37 +4637,53 @@ var SelectScrollDownButton = React8.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React8.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
-  SelectPrimitive.Content,
-  {
-    ref,
-    className: cn(
-      "signiphi-pdf-signer",
-      // Add scoping class to portal content
-      "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-      className
-    ),
-    position,
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-      /* @__PURE__ */ jsx(
-        SelectPrimitive.Viewport,
-        {
-          className: cn(
-            "p-1",
-            position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-          ),
-          children
-        }
+var SelectContent = React9.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
+  const mergedRef = React9.useCallback(
+    (node) => {
+      if (node) {
+        node.style.setProperty("z-index", "10001", "important");
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    },
+    [ref]
+  );
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      ref: mergedRef,
+      className: cn(
+        "signiphi-pdf-signer",
+        // Add scoping class to portal content
+        "max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
       ),
-      /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-    ]
-  }
-) }));
+      position,
+      style: { backgroundColor: "var(--sps-popover, white)", ...props.style },
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(
+          SelectPrimitive.Viewport,
+          {
+            className: cn(
+              "p-1",
+              position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            ),
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+});
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectLabel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Label,
   {
     ref,
@@ -3675,7 +4692,7 @@ var SelectLabel = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+var SelectItem = React9.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
   SelectPrimitive.Item,
   {
     ref,
@@ -3691,7 +4708,7 @@ var SelectItem = React8.forwardRef(({ className, children, ...props }, ref) => /
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var SelectSeparator = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   SelectPrimitive.Separator,
   {
     ref,
@@ -3822,7 +4839,7 @@ function Calendar({
 Calendar.displayName = "Calendar";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
-var PopoverContent = React8.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var PopoverContent = React9.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   PopoverPrimitive.Content,
   {
     ref,
@@ -3834,6 +4851,7 @@ var PopoverContent = React8.forwardRef(({ className, align = "center", sideOffse
       "z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     ),
+    style: { backgroundColor: "var(--sps-popover, white)", ...props.style },
     ...props
   }
 ) }));
@@ -3939,10 +4957,10 @@ function DateFieldRenderer({
               "aria-required": field.required,
               children: hasInvalidDate ? /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(AlertCircle, { className: "mr-2 h-4 w-4 text-destructive" }),
-                /* @__PURE__ */ jsx("span", { className: "text-destructive", children: invalidDateValue })
+                /* @__PURE__ */ jsx("span", { className: "text-destructive text-sm", children: invalidDateValue })
               ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx(Calendar$1, { className: "mr-2 h-4 w-4" }),
-                date ? format(date, "PPP") : /* @__PURE__ */ jsx("span", { children: "Pick a date" })
+                date ? /* @__PURE__ */ jsx("span", { className: "text-sm", children: format(date, "PPP") }) : /* @__PURE__ */ jsx("span", { className: "text-sm", children: "Pick a date" })
               ] })
             }
           ) }),
@@ -3975,7 +4993,7 @@ function DateFieldRenderer({
     hasInvalidDate && !displayError && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground mt-1", children: "Invalid date format. Please use the date picker to select a valid date." })
   ] });
 }
-var Checkbox = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Checkbox = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -4038,7 +5056,7 @@ function CheckboxRenderer({
     error && /* @__PURE__ */ jsx("div", { className: "text-sm text-destructive mt-1", children: error })
   ] });
 }
-var RadioGroup = React8.forwardRef(({ className, ...props }, ref) => {
+var RadioGroup = React9.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Root,
     {
@@ -4049,7 +5067,7 @@ var RadioGroup = React8.forwardRef(({ className, ...props }, ref) => {
   );
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React8.forwardRef(({ className, ...props }, ref) => {
+var RadioGroupItem = React9.forwardRef(({ className, ...props }, ref) => {
   return /* @__PURE__ */ jsx(
     RadioGroupPrimitive.Item,
     {
@@ -4072,12 +5090,22 @@ function RadioGroupRenderer({
   className = ""
 }) {
   const options = field.options || [];
+  const [localValue, setLocalValue] = useState(value);
+  useEffect(() => {
+    if (value && value !== localValue) {
+      setLocalValue(value);
+    }
+  }, [value]);
+  const handleChange = (newValue) => {
+    setLocalValue(newValue);
+    onChange(newValue);
+  };
   return /* @__PURE__ */ jsxs("div", { className: cn("w-full", className), children: [
     /* @__PURE__ */ jsx(
       RadioGroup,
       {
-        value,
-        onValueChange: onChange,
+        value: localValue,
+        onValueChange: handleChange,
         required: field.required,
         className: "",
         children: options.map((option) => {
@@ -4086,7 +5114,7 @@ function RadioGroupRenderer({
             "div",
             {
               className: "flex items-center space-x-3 p-3 -ml-3 -mr-3 rounded-lg hover:bg-muted/50 cursor-pointer transition-colors duration-200",
-              onClick: () => onChange(option),
+              onClick: () => handleChange(option),
               children: [
                 /* @__PURE__ */ jsx(
                   RadioGroupItem,
@@ -4571,11 +5599,21 @@ function AttachmentUpload({
   disabled = false,
   maxFiles = 10,
   formatSize,
-  className = ""
+  className = "",
+  constraints,
+  validationErrors,
+  onClearErrors
 }) {
   const [isDragging, setIsDragging] = useState(false);
   const fileInputRef = useRef(null);
   const dragCounterRef = useRef(0);
+  const acceptString = useMemo(() => {
+    if (!constraints) return void 0;
+    const types = constraints.allowedTypes ?? [];
+    const extensions = constraints.allowedExtensions ?? [];
+    const combined = [...types, ...extensions].join(",");
+    return combined || void 0;
+  }, [constraints]);
   const handleFileSelect = useCallback(
     (event) => {
       const files = event.target.files;
@@ -4586,6 +5624,11 @@ function AttachmentUpload({
     },
     [onAdd]
   );
+  const openFilePicker = useCallback(() => {
+    if (!disabled && !isUploading) {
+      fileInputRef.current?.click();
+    }
+  }, [disabled, isUploading]);
   const handleDragEnter = useCallback((event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -4620,6 +5663,36 @@ function AttachmentUpload({
     },
     [disabled, isUploading, onAdd]
   );
+  const handlePaste = useCallback(
+    (event) => {
+      if (disabled || isUploading) return;
+      const items = event.clipboardData?.items;
+      if (!items) return;
+      const files = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.kind === "file") {
+          const file = item.getAsFile();
+          if (file) files.push(file);
+        }
+      }
+      if (files.length > 0) {
+        event.preventDefault();
+        onAdd(files);
+      }
+    },
+    [disabled, isUploading, onAdd]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (disabled || isUploading) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        fileInputRef.current?.click();
+      }
+    },
+    [disabled, isUploading]
+  );
   const getFileIcon = (fileType) => {
     if (fileType.startsWith("image/")) {
       return /* @__PURE__ */ jsx(Image, { className: "w-6 h-6" });
@@ -4630,15 +5703,22 @@ function AttachmentUpload({
     return /* @__PURE__ */ jsx(File, { className: "w-6 h-6" });
   };
   const canAddMore = attachments.length < maxFiles;
-  return /* @__PURE__ */ jsxs("div", { className: `space-y-3 md:space-y-4 ${className}`, children: [
+  const totalSize = attachments.reduce((sum, att) => sum + att.size, 0);
+  return /* @__PURE__ */ jsxs("div", { className: `space-y-3 md:space-y-4 ${className}`, onPaste: handlePaste, children: [
     canAddMore && /* @__PURE__ */ jsxs(
       "div",
       {
+        onClick: openFilePicker,
+        onKeyDown: handleKeyDown,
         onDragEnter: handleDragEnter,
         onDragLeave: handleDragLeave,
         onDragOver: handleDragOver,
         onDrop: handleDrop,
-        className: `relative border-2 border-dashed rounded-lg p-4 md:p-8 text-center transition-colors ${isDragging ? "border-primary bg-primary/10" : disabled ? "border-border bg-muted cursor-not-allowed" : "border-border bg-background hover:border-border/80"}`,
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": `Upload files. ${attachments.length} of ${maxFiles} files attached.`,
+        "aria-disabled": disabled || isUploading,
+        className: `relative border-2 border-dashed rounded-lg p-4 md:p-8 text-center transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 ${isDragging ? "border-primary bg-primary/10 ring-2 ring-primary/30 scale-[1.01]" : disabled ? "border-border bg-muted cursor-not-allowed" : "border-border bg-background hover:border-primary/40 hover:bg-primary/5 cursor-pointer"}`,
         children: [
           /* @__PURE__ */ jsx(
             "input",
@@ -4646,6 +5726,7 @@ function AttachmentUpload({
               ref: fileInputRef,
               type: "file",
               multiple: true,
+              accept: acceptString,
               onChange: handleFileSelect,
               disabled: disabled || isUploading,
               className: "hidden",
@@ -4668,20 +5749,11 @@ function AttachmentUpload({
             /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
               /* @__PURE__ */ jsx("p", { className: "text-xs md:text-sm font-medium text-foreground", children: isDragging ? "Drop files here" : "Upload Attachments" }),
               /* @__PURE__ */ jsxs("p", { className: "text-xs md:text-sm text-muted-foreground px-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Drag and drop or " }),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => fileInputRef.current?.click(),
-                    disabled: disabled || isUploading,
-                    className: "text-primary hover:text-primary/80 font-medium focus:outline-none focus:underline disabled:text-muted-foreground disabled:cursor-not-allowed",
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "Tap to " }),
-                      "browse files"
-                    ]
-                  }
-                )
+                /* @__PURE__ */ jsx("span", { className: "hidden sm:inline", children: "Drag and drop, paste, or " }),
+                /* @__PURE__ */ jsxs("span", { className: "text-primary font-medium", children: [
+                  /* @__PURE__ */ jsx("span", { className: "sm:hidden", children: "Tap to " }),
+                  "browse files"
+                ] })
               ] }),
               /* @__PURE__ */ jsxs("p", { className: "text-xs md:text-sm text-muted-foreground", children: [
                 "PDF, Word, Images \u2022 Max ",
@@ -4697,13 +5769,34 @@ function AttachmentUpload({
         ]
       }
     ),
+    validationErrors && validationErrors.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 p-2 md:p-3 bg-destructive/10 border border-destructive/30 rounded-lg text-destructive", children: [
+      /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4 mt-0.5 flex-shrink-0" }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside text-xs md:text-sm space-y-0.5", children: validationErrors.map((error, index) => /* @__PURE__ */ jsx("li", { children: error }, index)) }) }),
+      onClearErrors && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClearErrors,
+          className: "flex-shrink-0 p-0.5 rounded text-destructive/70 hover:text-destructive transition-colors",
+          "aria-label": "Dismiss errors",
+          children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+        }
+      )
+    ] }),
     attachments.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs("p", { className: "text-xs md:text-sm font-medium text-foreground", children: [
-        "Attached Files (",
-        attachments.length,
-        "/",
-        maxFiles,
-        ")"
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-xs md:text-sm font-medium text-foreground", children: [
+          "Attached Files (",
+          attachments.length,
+          "/",
+          maxFiles,
+          ")"
+        ] }),
+        constraints && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          formatSize(totalSize),
+          " / ",
+          formatSize(constraints.maxTotalSize)
+        ] })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "space-y-2", children: attachments.map((attachment) => /* @__PURE__ */ jsxs(
         "div",
@@ -4813,39 +5906,37 @@ function RequiredFieldNavigation({
   className = ""
 }) {
   if (totalRequired === 0) return null;
-  return /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${className}`, children: [
-    /* @__PURE__ */ jsx(Star, { size: 16, className: "text-amber-500" }),
-    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Required Fields" }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          onClick: onPrevious,
-          className: "h-8 w-8",
-          "aria-label": "Previous required field",
-          children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
-        }
-      ),
-      /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground px-2", children: [
-        currentIndex + 1,
-        " / ",
-        totalRequired
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          variant: "ghost",
-          size: "icon",
-          onClick: onNext,
-          className: "h-8 w-8",
-          "aria-label": "Next required field",
-          children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsx("div", { className: `flex items-center gap-2 ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "ghost",
+        size: "icon",
+        onClick: onPrevious,
+        className: "h-8 w-8",
+        "aria-label": "Previous required field",
+        children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground px-2", children: [
+      currentIndex < 0 ? 0 : currentIndex + 1,
+      " / ",
+      totalRequired
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        variant: "ghost",
+        onClick: onNext,
+        className: "h-8 px-3 gap-1.5",
+        "aria-label": "Next required field",
+        children: [
+          /* @__PURE__ */ jsx(ChevronRight, { size: 16 }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Required Field" })
+        ]
+      }
+    )
+  ] }) });
 }
 function ViewToggleToolbar({
   currentView,
@@ -5034,7 +6125,51 @@ function ViewToggleToolbar({
             }
           )
         ] }),
-        showPdfControlsGroup && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-3 flex-shrink-0 w-full sm:w-auto justify-center sm:justify-start", children: [
+        showPdfControlsGroup && isViewerReady && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 bg-muted/60 rounded-lg p-0.5 sm:p-1 border border-border/50 shadow-sm", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              onClick: handlePreviousPage,
+              disabled: !isViewerReady || currentPage === null || currentPage <= 1,
+              className: cn(
+                "h-7 w-7 sm:h-8 sm:w-8 rounded-md transition-all duration-200",
+                "hover:bg-background/80 hover:shadow-sm",
+                "disabled:opacity-40 disabled:cursor-not-allowed",
+                "active:scale-95"
+              ),
+              "aria-label": "Previous page",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4 text-foreground/80" })
+            }
+          ),
+          currentPage !== null && totalPages !== null && /* @__PURE__ */ jsxs("div", { className: "px-2 sm:px-3 py-1 sm:py-1.5 min-w-[3rem] sm:min-w-[4rem] text-center text-[10px] sm:text-xs font-medium text-foreground/70 bg-background/50 rounded-md border border-border/30", children: [
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: currentPage }),
+            /* @__PURE__ */ jsx("span", { className: "mx-0.5 sm:mx-1 text-foreground/40", children: "/" }),
+            /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: totalPages })
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "icon",
+              onClick: handleNextPage,
+              disabled: !isViewerReady || currentPage === null || totalPages === null || currentPage >= totalPages,
+              className: cn(
+                "h-7 w-7 sm:h-8 sm:w-8 rounded-md transition-all duration-200",
+                "hover:bg-background/80 hover:shadow-sm",
+                "disabled:opacity-40 disabled:cursor-not-allowed",
+                "active:scale-95"
+              ),
+              "aria-label": "Next page",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4 text-foreground/80" })
+            }
+          )
+        ] }),
+        showPdfControlsGroup && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-3 flex-shrink-0 w-full sm:w-auto justify-center", children: [
+          /* @__PURE__ */ jsx("div", { className: "h-5 sm:h-6 w-px bg-border/60 hidden sm:block" }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 bg-muted/60 rounded-lg p-0.5 sm:p-1 border border-border/50 shadow-sm", children: [
             /* @__PURE__ */ jsx(
               Button,
@@ -5073,50 +6208,6 @@ function ViewToggleToolbar({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "h-5 sm:h-6 w-px bg-border/60 hidden sm:block" }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5 sm:gap-1 bg-muted/60 rounded-lg p-0.5 sm:p-1 border border-border/50 shadow-sm", children: [
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "icon",
-                onClick: handlePreviousPage,
-                disabled: !isViewerReady || currentPage === null || currentPage <= 1,
-                className: cn(
-                  "h-7 w-7 sm:h-8 sm:w-8 rounded-md transition-all duration-200",
-                  "hover:bg-background/80 hover:shadow-sm",
-                  "disabled:opacity-40 disabled:cursor-not-allowed",
-                  "active:scale-95"
-                ),
-                "aria-label": "Previous page",
-                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4 text-foreground/80" })
-              }
-            ),
-            currentPage !== null && totalPages !== null && /* @__PURE__ */ jsxs("div", { className: "px-2 sm:px-3 py-1 sm:py-1.5 min-w-[3rem] sm:min-w-[4rem] text-center text-[10px] sm:text-xs font-medium text-foreground/70 bg-background/50 rounded-md border border-border/30", children: [
-              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: currentPage }),
-              /* @__PURE__ */ jsx("span", { className: "mx-0.5 sm:mx-1 text-foreground/40", children: "/" }),
-              /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: totalPages })
-            ] }),
-            /* @__PURE__ */ jsx(
-              Button,
-              {
-                type: "button",
-                variant: "ghost",
-                size: "icon",
-                onClick: handleNextPage,
-                disabled: !isViewerReady || currentPage === null || totalPages === null || currentPage >= totalPages,
-                className: cn(
-                  "h-7 w-7 sm:h-8 sm:w-8 rounded-md transition-all duration-200",
-                  "hover:bg-background/80 hover:shadow-sm",
-                  "disabled:opacity-40 disabled:cursor-not-allowed",
-                  "active:scale-95"
-                ),
-                "aria-label": "Next page",
-                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-3.5 w-3.5 sm:h-4 sm:w-4 text-foreground/80" })
-              }
-            )
-          ] }),
           requiredFieldNavigation?.hasRequiredFields && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "h-5 sm:h-6 w-px bg-border/60 hidden sm:block" }),
             /* @__PURE__ */ jsx(
@@ -5191,7 +6282,7 @@ var alertVariants = cva(
     }
   }
 );
-var Alert = React8.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+var Alert = React9.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -5201,7 +6292,7 @@ var Alert = React8.forwardRef(({ className, variant, ...props }, ref) => /* @__P
   }
 ));
 Alert.displayName = "Alert";
-var AlertTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h5",
   {
     ref,
@@ -5210,7 +6301,7 @@ var AlertTitle = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React8.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var AlertDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -5574,10 +6665,15 @@ function UnacknowledgedFieldsModal({
   onOpenChange,
   unacknowledgedFields,
   onAcknowledge,
-  isAcknowledged
+  isAcknowledged,
+  onComplete
 }) {
   const [expandedItem, setExpandedItem] = useState("");
   const [isManuallyClosing, setIsManuallyClosing] = useState(false);
+  const onCompleteRef = useRef(onComplete);
+  useEffect(() => {
+    onCompleteRef.current = onComplete;
+  }, [onComplete]);
   useEffect(() => {
     if (open && unacknowledgedFields.length > 0 && expandedItem === "") {
       const firstField = unacknowledgedFields[0];
@@ -5600,6 +6696,9 @@ function UnacknowledgedFieldsModal({
           (ack) => ack.id === ackId || isAcknowledged(fieldId, ack.id)
         );
         if (allAcknowledged) {
+          setTimeout(() => {
+            onCompleteRef.current?.([fieldId]);
+          }, 150);
           const currentIndex = unacknowledgedFields.findIndex((f) => f.field.id === fieldId);
           const nextUnacknowledged = unacknowledgedFields[currentIndex + 1];
           if (nextUnacknowledged) {
@@ -5618,18 +6717,29 @@ function UnacknowledgedFieldsModal({
   };
   const handleAcknowledgeAll = async () => {
     setIsManuallyClosing(true);
+    const acknowledgedFieldIds = [];
     unacknowledgedFields.forEach(({ field }) => {
       if (field.acknowledgements) {
+        let fieldHadUnacknowledged = false;
         field.acknowledgements.forEach((ack) => {
           if (!isAcknowledged(field.id, ack.id)) {
             onAcknowledge(field.id, ack.id);
+            fieldHadUnacknowledged = true;
           }
         });
+        if (fieldHadUnacknowledged) {
+          acknowledgedFieldIds.push(field.id);
+        }
       }
     });
     await new Promise((resolve) => setTimeout(resolve, 150));
     onOpenChange(false);
     setIsManuallyClosing(false);
+    if (acknowledgedFieldIds.length > 0) {
+      setTimeout(() => {
+        onCompleteRef.current?.(acknowledgedFieldIds);
+      }, 150);
+    }
   };
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-2xl max-h-[80vh] flex flex-col", children: [
     /* @__PURE__ */ jsxs(DialogHeader, { children: [
@@ -5914,8 +7024,297 @@ function AcknowledgementsSidebar({
     }) }) })
   ] });
 }
+function calculatePopupPosition(fieldPos, popupWidth, popupHeight) {
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const gap = 8;
+  const edgePadding = 16;
+  const fieldTop = fieldPos.y;
+  const fieldBottom = fieldPos.y + fieldPos.height;
+  const fieldLeft = fieldPos.x;
+  const fieldRight = fieldPos.x + fieldPos.width;
+  const spaceBelow = viewportHeight - fieldBottom - edgePadding;
+  const spaceAbove = fieldTop - edgePadding;
+  const positionBelow = spaceBelow >= popupHeight || spaceBelow >= spaceAbove;
+  let top;
+  if (positionBelow) {
+    top = fieldBottom + gap;
+    if (top + popupHeight > viewportHeight - edgePadding) {
+      const topAbove = fieldTop - popupHeight - gap;
+      if (topAbove >= edgePadding) {
+        top = topAbove;
+      } else {
+        top = Math.min(fieldBottom + gap, viewportHeight - edgePadding - popupHeight);
+        top = Math.max(top, edgePadding);
+      }
+    }
+  } else {
+    top = fieldTop - popupHeight - gap;
+    if (top < edgePadding) {
+      top = fieldBottom + gap;
+      if (top + popupHeight > viewportHeight - edgePadding) {
+        top = Math.max(edgePadding, viewportHeight - edgePadding - popupHeight);
+      }
+    }
+  }
+  if (top < fieldBottom && top + popupHeight > fieldTop) {
+    top = fieldBottom + gap;
+    if (top + popupHeight > viewportHeight - edgePadding) {
+      top = fieldTop - popupHeight - gap;
+      if (top < edgePadding) {
+        top = edgePadding;
+      }
+    }
+  }
+  let left = fieldLeft;
+  if (left + popupWidth > viewportWidth - edgePadding) {
+    left = fieldRight - popupWidth;
+  }
+  if (left + popupWidth > viewportWidth - edgePadding) {
+    left = viewportWidth - edgePadding - popupWidth;
+  }
+  if (left < edgePadding) {
+    left = edgePadding;
+  }
+  return { top: Math.round(top), left: Math.round(left) };
+}
+function DateFieldCalendarPopup({
+  open,
+  onOpenChange,
+  value,
+  onSelect,
+  fieldPosition,
+  fieldLabel
+}) {
+  const [date, setDate] = useState(void 0);
+  const [position, setPosition] = useState({ top: 0, left: 0 });
+  const popupRef = useRef(null);
+  const frozenPositionRef = useRef(null);
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    if (value) {
+      const validation = parseAndValidateDate(value);
+      if (validation.isValid && validation.date) {
+        setDate(validation.date);
+      } else {
+        setDate(void 0);
+      }
+    } else {
+      setDate(void 0);
+    }
+  }, [value]);
+  useEffect(() => {
+    if (open && fieldPosition) {
+      if (!frozenPositionRef.current) {
+        frozenPositionRef.current = { ...fieldPosition };
+        requestAnimationFrame(() => {
+          if (popupRef.current && frozenPositionRef.current) {
+            const popupRect = popupRef.current.getBoundingClientRect();
+            const newPosition = calculatePopupPosition(
+              frozenPositionRef.current,
+              popupRect.width || 350,
+              // Default width estimate
+              popupRect.height || 400
+              // Default height estimate
+            );
+            setPosition(newPosition);
+          }
+        });
+      }
+    } else if (!open) {
+      frozenPositionRef.current = null;
+      setPosition({ top: 0, left: 0 });
+    }
+  }, [open, fieldPosition]);
+  useEffect(() => {
+    if (popupRef.current && (position.top !== 0 || position.left !== 0)) {
+      popupRef.current.style.setProperty("top", `${position.top}px`, "important");
+      popupRef.current.style.setProperty("left", `${position.left}px`, "important");
+      popupRef.current.style.setProperty("position", "fixed", "important");
+      popupRef.current.style.setProperty("transform", "none", "important");
+    }
+  }, [position]);
+  useEffect(() => {
+    if (!open) return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (popupRef.current && popupRef.current.contains(target)) {
+        return;
+      }
+      const selectElement = target.closest?.(
+        "[data-radix-select-content], [data-radix-select-item], [data-radix-select-trigger], [data-radix-select-viewport]"
+      );
+      if (selectElement) {
+        return;
+      }
+      onOpenChange(false);
+    };
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onOpenChange(false);
+      }
+    };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscape);
+    }, 100);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [open, onOpenChange]);
+  useEffect(() => {
+    if (!open) return;
+    const handleScroll = () => {
+      onOpenChange(false);
+    };
+    const timeoutId = setTimeout(() => {
+      window.addEventListener("scroll", handleScroll, { passive: true });
+      const iframe = document.querySelector("iframe");
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.addEventListener("scroll", handleScroll, { passive: true });
+        const viewerContainer = iframe.contentDocument?.querySelector("#viewerContainer");
+        if (viewerContainer) {
+          viewerContainer.addEventListener("scroll", handleScroll, { passive: true });
+        }
+      }
+    }, 100);
+    return () => {
+      clearTimeout(timeoutId);
+      window.removeEventListener("scroll", handleScroll);
+      const iframe = document.querySelector("iframe");
+      if (iframe?.contentWindow) {
+        iframe.contentWindow.removeEventListener("scroll", handleScroll);
+        const viewerContainer = iframe.contentDocument?.querySelector("#viewerContainer");
+        if (viewerContainer) {
+          viewerContainer.removeEventListener("scroll", handleScroll);
+        }
+      }
+    };
+  }, [open, onOpenChange]);
+  useEffect(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  const handleDateSelect = (selectedDate) => {
+    if (selectedDate) {
+      setDate(selectedDate);
+      const isoString = format(selectedDate, "yyyy-MM-dd");
+      onSelect(isoString);
+      onOpenChange(false);
+    }
+  };
+  const handleToday = () => {
+    const today = /* @__PURE__ */ new Date();
+    handleDateSelect(today);
+  };
+  const handleClear = () => {
+    setDate(void 0);
+    onSelect("");
+    onOpenChange(false);
+  };
+  const handleClose = () => {
+    onOpenChange(false);
+  };
+  if (!open || !mounted || !fieldPosition) {
+    return null;
+  }
+  const hasValidPosition = position.top !== 0 || position.left !== 0;
+  const content = /* @__PURE__ */ jsx("div", { className: "signiphi-pdf-signer", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: popupRef,
+      className: "signiphi-pdf-calendar-popup",
+      style: {
+        visibility: hasValidPosition ? "visible" : "hidden",
+        // Use visibility instead of opacity
+        opacity: hasValidPosition ? 1 : 0,
+        // Also keep opacity for smooth fade-in
+        pointerEvents: hasValidPosition ? "auto" : "none"
+        // Disable interaction until positioned
+      },
+      role: "dialog",
+      "aria-label": fieldLabel ? `Select date for ${fieldLabel}` : "Select date",
+      "aria-modal": "true",
+      children: /* @__PURE__ */ jsxs(Card, { className: "p-0 shadow-lg border-2 border-border bg-popover rounded-lg", children: [
+        /* @__PURE__ */ jsx("div", { className: "p-3", children: /* @__PURE__ */ jsx(
+          Calendar,
+          {
+            mode: "single",
+            selected: date,
+            onSelect: handleDateSelect,
+            initialFocus: true
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2 p-3 border-t border-border", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleToday,
+              className: "flex-1",
+              children: "Today"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: handleClear,
+              className: "flex-1",
+              children: "Clear"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              onClick: handleClose,
+              className: "flex-1",
+              children: "Cancel"
+            }
+          )
+        ] })
+      ] })
+    }
+  ) });
+  return createPortal(content, document.body);
+}
 
 // src/utils/pdf-viewer-filter.ts
+function robustlyRemoveField(form, field) {
+  try {
+    const fieldWithAcro = field;
+    if (fieldWithAcro.acroField && typeof fieldWithAcro.acroField.getWidgets === "function") {
+      let widgets = fieldWithAcro.acroField.getWidgets() || [];
+      let safetyCounter = 0;
+      const maxIterations = widgets.length + 5;
+      while (widgets.length > 0 && safetyCounter < maxIterations) {
+        try {
+          const widgetIndex = widgets.length - 1;
+          fieldWithAcro.acroField.removeWidget?.(widgetIndex);
+          widgets = fieldWithAcro.acroField.getWidgets() || [];
+        } catch {
+          break;
+        }
+        safetyCounter++;
+      }
+    }
+    form.removeField(field);
+    return true;
+  } catch (error) {
+    try {
+      form.removeField(field);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+}
 async function drawFieldLabelsOnPdf(pdfDoc, fieldsToLabel, rgb) {
   try {
     const labelFont = await pdfDoc.embedFont("Helvetica-Bold");
@@ -5925,8 +7324,7 @@ async function drawFieldLabelsOnPdf(pdfDoc, fieldsToLabel, rgb) {
     for (const field of fieldsToLabel) {
       const isRadioField = field.type === "radio" /* RADIO */;
       const hasRadioOptions = isRadioField && field.options && field.options.length > 0;
-      const hasCustomLabel = field.label && field.label.trim() && !isAutoGeneratedLabel(field.label);
-      if (!hasCustomLabel && !hasRadioOptions) {
+      if (!hasDrawableLabel(field) && !hasRadioOptions) {
         continue;
       }
       const pdfField = form.getFieldMaybe(field.name);
@@ -5937,27 +7335,30 @@ async function drawFieldLabelsOnPdf(pdfDoc, fieldsToLabel, rgb) {
       const widgets = fieldWithExtensions.acroField?.getWidgets?.() || [];
       if (widgets.length === 0) continue;
       if (isRadioField) {
-        if (field.label && field.label.trim() && !isAutoGeneratedLabel(field.label)) {
+        if (hasDrawableLabel(field)) {
           const firstWidget = widgets[0];
-          if (!firstWidget) continue;
-          const firstRect = firstWidget.getRectangle?.();
-          if (firstRect) {
-            const pageRef = firstWidget.P?.();
-            const pageIndex = findPageIndexWithFallback(pages, pageRef);
-            if (pageIndex >= 0) {
-              const page = pages[pageIndex];
-              if (!page) continue;
-              const groupLabelKey = `${pageIndex}-${field.name}-grouplabel`;
-              if (!drawnOnce.has(groupLabelKey)) {
-                const labelY = firstRect.y + firstRect.height + 5;
-                page.drawText(field.label, {
-                  x: firstRect.x,
-                  y: labelY,
-                  size: 10,
-                  font: labelFont,
-                  color: rgb(0, 0, 0)
-                });
-                drawnOnce.add(groupLabelKey);
+          if (firstWidget) {
+            const firstRect = firstWidget.getRectangle?.();
+            if (firstRect) {
+              const pageRef = firstWidget.P?.();
+              const pageIndex = findPageIndexWithFallback(pages, pageRef);
+              if (pageIndex >= 0) {
+                const page = pages[pageIndex];
+                if (page) {
+                  const groupLabelKey = `${pageIndex}-${field.name}-grouplabel`;
+                  if (!drawnOnce.has(groupLabelKey)) {
+                    const radioLabelFontSize = Math.min(10, firstRect.height * 0.4);
+                    const labelY = firstRect.y + firstRect.height + 5;
+                    page.drawText(field.label, {
+                      x: firstRect.x,
+                      y: labelY,
+                      size: radioLabelFontSize,
+                      font: labelFont,
+                      color: rgb(0, 0, 0)
+                    });
+                    drawnOnce.add(groupLabelKey);
+                  }
+                }
               }
             }
           }
@@ -5970,17 +7371,16 @@ async function drawFieldLabelsOnPdf(pdfDoc, fieldsToLabel, rgb) {
             if (!rect) continue;
             const pageRef = widget.P?.();
             const pageIndex = findPageIndexWithFallback(pages, pageRef);
-            if (pageIndex >= 0) {
+            if (pageIndex >= 0 && pageIndex < pages.length) {
               const page = pages[pageIndex];
               if (!page) continue;
-              const optionTexts = field.options;
-              const optionText = optionTexts[i] || optionTexts[0];
+              const optionText = field.options[i];
               const optionKey = `${pageIndex}-${field.name}-opt-${i}`;
               if (optionText && !drawnOnce.has(optionKey)) {
                 page.drawText(optionText, {
-                  x: rect.x + rect.width + 6,
-                  y: rect.y + (rect.height - 10) / 2,
-                  size: 10,
+                  x: rect.x + rect.width + 4,
+                  y: rect.y + (rect.height - 7) / 2,
+                  size: 7,
                   font: labelFont,
                   color: rgb(0, 0, 0)
                 });
@@ -6001,12 +7401,13 @@ async function drawFieldLabelsOnPdf(pdfDoc, fieldsToLabel, rgb) {
           if (!page) continue;
           const key = `${pageIndex}-${field.name}`;
           if (!drawnOnce.has(key)) {
-            if (!isAutoGeneratedLabel(field.label)) {
+            if (hasDrawableLabel(field)) {
+              const labelFontSize = Math.min(10, rect.height * 0.4);
               if (field.type === "checkbox" /* CHECKBOX */) {
                 page.drawText(field.label, {
                   x: rect.x + rect.width + 5,
-                  y: rect.y + rect.height * 0.2,
-                  size: 10,
+                  y: rect.y + (rect.height - labelFontSize) / 2,
+                  size: labelFontSize,
                   font: labelFont,
                   color: rgb(0, 0, 0)
                 });
@@ -6015,9 +7416,9 @@ async function drawFieldLabelsOnPdf(pdfDoc, fieldsToLabel, rgb) {
                 page.drawText(field.label, {
                   x: rect.x,
                   y: labelY,
-                  size: 9,
+                  size: labelFontSize,
                   font: labelFont,
-                  color: rgb(0.3, 0.3, 0.3)
+                  color: rgb(0, 0, 0)
                 });
               }
               drawnOnce.add(key);
@@ -6078,7 +7479,7 @@ async function filterPdfForCurrentSigner(pdfBytes, allFields, multiSignerContext
     try {
       const pdfField = form.getFieldMaybe(field.name);
       if (pdfField) {
-        form.removeField(pdfField);
+        robustlyRemoveField(form, pdfField);
         removedCount++;
       } else {
         notFoundCount++;
@@ -6112,7 +7513,7 @@ function usePdfViewer(multiSignerContext) {
   const [originalPdfBytes, setOriginalPdfBytes] = useState(null);
   const [_viewerPdfBytes, setViewerPdfBytes] = useState(null);
   const [extractedFields, setExtractedFields] = useState([]);
-  const loadPdf = useCallback(async (url) => {
+  const loadPdf = useCallback(async (url, signerEmailForExtraction) => {
     setIsLoading(true);
     setError(null);
     setIsLoaded(false);
@@ -6125,8 +7526,22 @@ function usePdfViewer(multiSignerContext) {
       }
       const bytes = await urlToPdfBytes(url);
       setOriginalPdfBytes(bytes);
-      setViewerPdfBytes(bytes);
-      await viewerRef.current?.loadPdf(url);
+      const fields = await extractVisibleFormFields(bytes, signerEmailForExtraction);
+      setExtractedFields(fields);
+      const filteredBytes = await filterPdfForCurrentSigner(
+        bytes,
+        fields,
+        multiSignerContext || {
+          isMultiSigner: false,
+          currentSigner: null,
+          currentSignerEmail: "",
+          isPrimarySigner: true,
+          isFinalSigner: true
+        }
+      );
+      setViewerPdfBytes(filteredBytes);
+      const blobUrl = createPdfBlobUrl(filteredBytes);
+      await viewerRef.current?.loadPdf(blobUrl);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "Failed to load PDF";
       logger.error("Error loading PDF:", err);
@@ -6134,7 +7549,7 @@ function usePdfViewer(multiSignerContext) {
       setOriginalPdfBytes(null);
       setViewerPdfBytes(null);
     }
-  }, []);
+  }, [multiSignerContext]);
   const handleLoad = useCallback(() => {
     setIsLoading(false);
     setIsLoaded(true);
@@ -6170,52 +7585,15 @@ function usePdfViewer(multiSignerContext) {
     return await viewerRef.current.saveDocument();
   }, []);
   const extractFormFields = useCallback(
-    async (currentSignerEmail) => {
-      if (!originalPdfBytes) {
-        throw new Error("No PDF loaded");
-      }
-      try {
-        const fields = await extractVisibleFormFields(
-          originalPdfBytes,
-          currentSignerEmail
-        );
-        setExtractedFields(fields);
-        if (multiSignerContext?.isMultiSigner) {
-          const filteredBytes = await filterPdfForCurrentSigner(
-            originalPdfBytes,
-            fields,
-            multiSignerContext
-          );
-          setViewerPdfBytes(filteredBytes);
-          const filteredBlobUrl = createPdfBlobUrl(filteredBytes);
-          await viewerRef.current?.loadPdf(filteredBlobUrl);
-        } else {
-          const labeledBytes = await filterPdfForCurrentSigner(
-            originalPdfBytes,
-            fields,
-            multiSignerContext || {
-              isMultiSigner: false,
-              currentSigner: null,
-              currentSignerEmail: "",
-              isPrimarySigner: true,
-              isFinalSigner: true
-            }
-          );
-          setViewerPdfBytes(labeledBytes);
-          const labeledBlobUrl = createPdfBlobUrl(labeledBytes);
-          await viewerRef.current?.loadPdf(labeledBlobUrl);
-        }
-        if (viewerRef.current && fields.length > 0) {
-          await new Promise((resolve) => setTimeout(resolve, 100));
-          viewerRef.current.injectPlaceholders(fields);
-        }
-        return fields;
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : "Failed to extract form fields";
-        throw new Error(errorMessage);
+    async (_currentSignerEmail) => {
+      if (viewerRef.current && extractedFields.length > 0) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        viewerRef.current.injectPlaceholders(extractedFields);
+        viewerRef.current.injectRadioLabels(extractedFields);
       }
+      return extractedFields;
     },
-    [originalPdfBytes, multiSignerContext]
+    [extractedFields]
   );
   const fillPdf = useCallback(
     async (fieldValues, signatures, currentSignerEmail, metadata, auditTrail) => {
@@ -6358,6 +7736,20 @@ function usePdfViewer(multiSignerContext) {
 }
 function useFormFields(fields = []) {
   const [fieldValues, setFieldValues] = useState({});
+  const seededFieldsRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    if (fields.length === 0) return;
+    const defaults = {};
+    for (const field of fields) {
+      if (field.defaultValue && field.defaultValue.trim() && !seededFieldsRef.current.has(field.id)) {
+        defaults[field.id] = field.defaultValue;
+        seededFieldsRef.current.add(field.id);
+      }
+    }
+    if (Object.keys(defaults).length > 0) {
+      setFieldValues((prev) => ({ ...defaults, ...prev }));
+    }
+  }, [fields]);
   const [errors, setErrors] = useState([]);
   const [touched, setTouched] = useState({});
   const updateField = useCallback((fieldId, value) => {
@@ -6397,14 +7789,14 @@ function useFormFields(fields = []) {
         if (!value || value.trim() === "") {
           newErrors.push({
             field: fieldId,
-            message: `${field.label || field.name} is required`
+            message: `${getFieldDisplayName(field)} is required`
           });
         }
       }
       if (value && field.maxLength && value.length > field.maxLength) {
         newErrors.push({
           field: fieldId,
-          message: `${field.label || field.name} must be at most ${field.maxLength} characters`
+          message: `${getFieldDisplayName(field)} must be at most ${field.maxLength} characters`
         });
       }
       if (value && field.type === "date") {
@@ -6430,13 +7822,13 @@ function useFormFields(fields = []) {
             if (!signatures[field.id]) {
               newErrors.push({
                 field: field.id,
-                message: `${field.label || field.name} is required`
+                message: `${getFieldDisplayName(field)} is required`
               });
             }
           } else if (!value2 || value2.trim() === "") {
             newErrors.push({
               field: field.id,
-              message: `${field.label || field.name} is required`
+              message: `${getFieldDisplayName(field)} is required`
             });
           }
         }
@@ -6444,7 +7836,7 @@ function useFormFields(fields = []) {
         if (value && field.maxLength && value.length > field.maxLength) {
           newErrors.push({
             field: field.id,
-            message: `${field.label || field.name} must be at most ${field.maxLength} characters`
+            message: `${getFieldDisplayName(field)} must be at most ${field.maxLength} characters`
           });
         }
         if (value && field.type === "date") {
@@ -6551,7 +7943,7 @@ function useSignatures() {
       for (const field of fields) {
         if (field.required && (field.type === "signature" || field.type === "initials")) {
           if (!signaturesToCheck[field.id]) {
-            errors.push(`${field.label || field.name} is required`);
+            errors.push(`${getFieldDisplayName(field)} is required`);
           }
         }
       }
@@ -6669,6 +8061,13 @@ function useAttachments(options = {}) {
           errors.push(...validation.errors);
           continue;
         }
+        const isDuplicate = [...attachments, ...newAttachments].some(
+          (att) => att.name.toLowerCase() === file.name.toLowerCase()
+        );
+        if (isDuplicate) {
+          errors.push(`"${file.name}" is already attached`);
+          continue;
+        }
         const currentTotalSize = [...attachments, ...newAttachments].reduce((sum, att) => sum + att.size, 0);
         if (currentTotalSize + file.size > constraints.maxTotalSize) {
           const maxTotalMB = (constraints.maxTotalSize / 1024 / 1024).toFixed(1);
@@ -6719,6 +8118,9 @@ function useAttachments(options = {}) {
     setAttachments([]);
     setValidationErrors([]);
   }, []);
+  const clearValidationErrors = useCallback(() => {
+    setValidationErrors([]);
+  }, []);
   const getTotalSize = useCallback(() => {
     return attachments.reduce((sum, att) => sum + att.size, 0);
   }, [attachments]);
@@ -6750,6 +8152,7 @@ function useAttachments(options = {}) {
     addFiles,
     removeAttachment,
     clearAttachments,
+    clearValidationErrors,
     // Utilities
     getTotalSize,
     formatSize,
@@ -6782,6 +8185,10 @@ function useAcknowledgements(fields) {
   const [acknowledgedMap, setAcknowledgedMap] = useState(
     /* @__PURE__ */ new Map()
   );
+  const acknowledgedMapRef = useRef(acknowledgedMap);
+  useEffect(() => {
+    acknowledgedMapRef.current = acknowledgedMap;
+  }, [acknowledgedMap]);
   const getFieldsWithAcknowledgements = useCallback((fieldsToFilter) => {
     return fieldsToFilter.filter(
       (field) => field.acknowledgements && field.acknowledgements.length > 0
@@ -6793,26 +8200,27 @@ function useAcknowledgements(fields) {
       const fieldAcks = newMap.get(fieldId) || /* @__PURE__ */ new Set();
       fieldAcks.add(ackId);
       newMap.set(fieldId, fieldAcks);
+      acknowledgedMapRef.current = newMap;
       return newMap;
     });
   }, []);
   const isAcknowledged = useCallback((fieldId, ackId) => {
-    const fieldAcks = acknowledgedMap.get(fieldId);
+    const fieldAcks = acknowledgedMapRef.current.get(fieldId);
     if (!fieldAcks) return false;
     if (ackId) {
       return fieldAcks.has(ackId);
     }
     return fieldAcks.size > 0;
-  }, [acknowledgedMap]);
+  }, []);
   const isFieldFullyAcknowledged = useCallback((fieldId) => {
     const field = fields.find((f) => f.id === fieldId);
     if (!field || !field.acknowledgements || field.acknowledgements.length === 0) {
       return true;
     }
-    const fieldAcks = acknowledgedMap.get(fieldId);
+    const fieldAcks = acknowledgedMapRef.current.get(fieldId);
     if (!fieldAcks) return false;
     return field.acknowledgements.every((ack) => fieldAcks.has(ack.id));
-  }, [fields, acknowledgedMap]);
+  }, [fields]);
   const getFieldAcknowledgementProgress = useCallback((fieldId) => {
     const field = fields.find((f) => f.id === fieldId);
     if (!field || !field.acknowledgements || field.acknowledgements.length === 0) {
@@ -6867,7 +8275,7 @@ function useAcknowledgements(fields) {
   };
 }
 function useRequiredFieldNavigation(fields) {
-  const [currentRequiredIndex, setCurrentRequiredIndex] = useState(0);
+  const [currentRequiredIndex, setCurrentRequiredIndex] = useState(-1);
   const requiredFields = useMemo(() => {
     return fields.filter((f) => {
       if (f.id === "signature_field_main" || f.id === "initials_field_main") {
@@ -6879,18 +8287,18 @@ function useRequiredFieldNavigation(fields) {
   const hasRequiredFields = requiredFields.length > 0;
   const goToNextRequired = useCallback(() => {
     if (!hasRequiredFields) return null;
-    const nextIndex = (currentRequiredIndex + 1) % requiredFields.length;
+    const nextIndex = currentRequiredIndex === -1 ? 0 : (currentRequiredIndex + 1) % requiredFields.length;
     setCurrentRequiredIndex(nextIndex);
     return requiredFields[nextIndex] || null;
   }, [currentRequiredIndex, requiredFields, hasRequiredFields]);
   const goToPreviousRequired = useCallback(() => {
     if (!hasRequiredFields) return null;
-    const prevIndex = currentRequiredIndex === 0 ? requiredFields.length - 1 : currentRequiredIndex - 1;
+    const prevIndex = currentRequiredIndex <= 0 ? requiredFields.length - 1 : currentRequiredIndex - 1;
     setCurrentRequiredIndex(prevIndex);
     return requiredFields[prevIndex] || null;
   }, [currentRequiredIndex, requiredFields, hasRequiredFields]);
   const currentRequiredField = useMemo(() => {
-    if (!hasRequiredFields) return null;
+    if (!hasRequiredFields || currentRequiredIndex < 0) return null;
     return requiredFields[currentRequiredIndex] || null;
   }, [requiredFields, currentRequiredIndex, hasRequiredFields]);
   return {
@@ -6956,8 +8364,9 @@ function SubmissionForm({
     validateFields,
     getFieldError,
     isFieldTouched,
+    touched,
     clearFields
-  } = useFormFields();
+  } = useFormFields(extractedFields);
   const {
     signatures,
     setSignature: setSignatureOriginal,
@@ -6969,12 +8378,16 @@ function SubmissionForm({
   } = useSignatures();
   const signaturesRef = useRef(signatures);
   const fieldValuesRef = useRef(fieldValues);
+  const touchedRef = useRef(touched);
   useEffect(() => {
     signaturesRef.current = signatures;
   }, [signatures]);
   useEffect(() => {
     fieldValuesRef.current = fieldValues;
   }, [fieldValues]);
+  useEffect(() => {
+    touchedRef.current = touched;
+  }, [touched]);
   const formFields = customFormFields || extractedFields;
   const { filteredFields, isFieldVisible } = useFieldFiltering(formFields, multiSignerContext);
   const {
@@ -6995,7 +8408,15 @@ function SubmissionForm({
   } = useRequiredFieldNavigation(filteredFields);
   const [acknowledgementModalOpen, setAcknowledgementModalOpen] = useState(false);
   const [currentAcknowledgementField, setCurrentAcknowledgementField] = useState(null);
+  const [currentAcknowledgementFieldName, setCurrentAcknowledgementFieldName] = useState(null);
+  const currentAcknowledgementElementRef = useRef(null);
+  const acknowledgementTriggerSourceRef = useRef(null);
+  const acknowledgementCleanupTimeoutRef = useRef(null);
   const [unacknowledgedModalOpen, setUnacknowledgedModalOpen] = useState(false);
+  const recentlyAcknowledgedFieldsRef = useRef(/* @__PURE__ */ new Map());
+  const [dateCalendarOpen, setDateCalendarOpen] = useState(false);
+  const [currentDateField, setCurrentDateField] = useState(null);
+  const [dateFieldPosition, setDateFieldPosition] = useState(null);
   const realPdfFieldsByType = useMemo(() => {
     return {
       signature: filteredFields.filter(
@@ -7006,6 +8427,15 @@ function SubmissionForm({
       )
     };
   }, [filteredFields]);
+  const hasInitialsFields = useMemo(() => {
+    return filteredFields.some((f) => f.id === "initials_field_main" || f.type === "initials");
+  }, [filteredFields]);
+  const defaultSigningMessage = useMemo(() => {
+    if (hasInitialsFields) {
+      return "Fill out the form fields directly in the PDF document. Your signature and initials below will be applied to the document automatically.";
+    }
+    return "Fill out the form fields directly in the PDF document. Your signature below will be applied to the document automatically.";
+  }, [hasInitialsFields]);
   const getPdfFieldNamesForIndicators = useCallback((fieldType) => {
     const realPdfFields = realPdfFieldsByType[fieldType];
     console.log(`[SubmissionForm] Total filteredFields count:`, filteredFields.length);
@@ -7042,6 +8472,15 @@ function SubmissionForm({
     return result;
   }, [realPdfFieldsByType, filteredFields, isFieldFullyAcknowledged]);
   const indicatorUpdateTimers = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    return () => {
+      if (acknowledgementCleanupTimeoutRef.current) {
+        clearTimeout(acknowledgementCleanupTimeoutRef.current);
+      }
+      indicatorUpdateTimers.current.forEach((timer) => clearTimeout(timer));
+      indicatorUpdateTimers.current.clear();
+    };
+  }, []);
   const updateFieldIndicator = useCallback((fieldId) => {
     const existingTimer = indicatorUpdateTimers.current.get(fieldId);
     if (existingTimer) {
@@ -7088,11 +8527,11 @@ function SubmissionForm({
       }
       let hasValue;
       if (field.type === "signature" && fieldId !== "signature_field_main") {
-        hasValue = hasSignature("signature_field_main");
+        hasValue = !!signaturesRef.current["signature_field_main"];
       } else if (field.type === "initials" && fieldId !== "initials_field_main") {
-        hasValue = !!(fieldValues["initials_field_main"] && String(fieldValues["initials_field_main"]).trim() !== "");
+        hasValue = !!(fieldValuesRef.current["initials_field_main"] && String(fieldValuesRef.current["initials_field_main"]).trim() !== "");
       } else {
-        hasValue = field.type === "signature" ? hasSignature(field.id) : !!(fieldValues[field.id] && String(fieldValues[field.id]).trim() !== "");
+        hasValue = field.type === "signature" ? !!signaturesRef.current[field.id] : !!(fieldValuesRef.current[field.id] && String(fieldValuesRef.current[field.id]).trim() !== "");
       }
       const hasAcknowledgements = field.acknowledgements && field.acknowledgements.length > 0;
       if (!hasValue && !hasAcknowledgements) {
@@ -7143,24 +8582,38 @@ function SubmissionForm({
       } catch (error) {
         logger.error(`[FIELD INDICATOR] Failed to add ${indicatorType} indicator for ${field.id}:`, error);
       }
-      indicatorUpdateTimers.current.delete(fieldId);
-    }, 200);
+    }, 50);
     indicatorUpdateTimers.current.set(fieldId, timer);
-  }, [filteredFields, fieldValues, hasSignature, isFieldFullyAcknowledged, viewerRef, getPdfFieldNamesForIndicators]);
+  }, [filteredFields, isFieldFullyAcknowledged, viewerRef, getPdfFieldNamesForIndicators]);
+  const updateFieldIndicatorRef = useRef(updateFieldIndicator);
+  useEffect(() => {
+    updateFieldIndicatorRef.current = updateFieldIndicator;
+  }, [updateFieldIndicator]);
   const acknowledgeItem = useCallback((fieldId, ackId) => {
     acknowledgeItemOriginal(fieldId, ackId);
-    updateFieldIndicator(fieldId);
-  }, [acknowledgeItemOriginal, updateFieldIndicator]);
+    updateFieldIndicatorRef.current(fieldId);
+  }, [acknowledgeItemOriginal]);
   const setSignature = useCallback((fieldId, dataUrl) => {
     setSignatureOriginal(fieldId, dataUrl);
-    updateFieldIndicator(fieldId);
-  }, [setSignatureOriginal, updateFieldIndicator]);
+    signaturesRef.current = {
+      ...signaturesRef.current,
+      [fieldId]: dataUrl
+    };
+    updateFieldIndicatorRef.current(fieldId);
+    if (dataUrl.startsWith("data:")) {
+      viewerRef.current?.previewSignature(fieldId, dataUrl);
+    } else {
+      viewerRef.current?.previewInitials(fieldId, dataUrl);
+    }
+  }, [setSignatureOriginal]);
   const {
     attachments,
     isUploading: isUploadingAttachments,
     validationErrors: attachmentErrors,
+    constraints: attachmentConstraints,
     addFiles,
     removeAttachment,
+    clearValidationErrors: clearAttachmentErrors,
     formatSize,
     validateAll: validateAttachments
   } = useAttachments({
@@ -7183,17 +8636,17 @@ function SubmissionForm({
   const formFieldsViewRef = useRef(null);
   useEffect(() => {
     if (pdfUrl) {
-      loadPdf(pdfUrl);
+      const signerEmailForExtraction = multiSignerContext.isMultiSigner ? effectiveSignerEmail : void 0;
+      loadPdf(pdfUrl, signerEmailForExtraction);
     }
-  }, [pdfUrl, loadPdf]);
+  }, [pdfUrl, loadPdf, multiSignerContext.isMultiSigner, effectiveSignerEmail]);
   useEffect(() => {
     if (isPdfLoaded && !customFormFields) {
-      const signerEmailForExtraction = multiSignerContext.isMultiSigner ? effectiveSignerEmail : void 0;
-      extractFormFields(signerEmailForExtraction).catch((error) => {
-        logger.error("Failed to extract form fields:", error);
+      extractFormFields().catch((error) => {
+        logger.error("Failed to inject placeholders:", error);
       });
     }
-  }, [isPdfLoaded, effectiveSignerEmail, extractFormFields, customFormFields, multiSignerContext.isMultiSigner]);
+  }, [isPdfLoaded, extractFormFields, customFormFields]);
   useEffect(() => {
     if (!isPdfLoaded || !viewerRef.current) {
       return;
@@ -7208,7 +8661,7 @@ function SubmissionForm({
       });
     }, 700);
     return () => clearTimeout(timeoutId);
-  }, [isPdfLoaded, filteredFields, updateFieldIndicator, viewerRef]);
+  }, [isPdfLoaded, filteredFields, viewerRef]);
   useEffect(() => {
     if (!isPdfLoaded || !viewerRef.current) {
       return;
@@ -7217,68 +8670,49 @@ function SubmissionForm({
       if (signatures["signature_field_main"]) {
         updateFieldIndicator("signature_field_main");
       }
-      if (fieldValues["initials_field_main"]) {
+      if (signatures["initials_field_main"] || fieldValues["initials_field_main"]) {
         updateFieldIndicator("initials_field_main");
       }
     }, 250);
     return () => clearTimeout(timeoutId);
-  }, [signatures, fieldValues, updateFieldIndicator, isPdfLoaded, viewerRef]);
+  }, [signatures, isPdfLoaded, viewerRef]);
   useEffect(() => {
-    if (!isPdfLoaded || !viewerRef.current || viewMode !== "pdf") {
-      return;
-    }
+    if (!isPdfLoaded || !viewerRef.current) return;
     const iframe = document.querySelector("iframe");
-    if (!iframe?.contentDocument) {
-      return;
-    }
-    const doc = iframe.contentDocument;
-    const handlePdfFieldChange = async (event) => {
-      const target = event.target;
-      const fieldName = target.getAttribute("name") || target.getAttribute("data-element-id") || "";
-      if (!fieldName) return;
-      let field = filteredFields.find((f) => f.fieldId === fieldName);
-      if (!field) {
-        field = filteredFields.find((f) => f.id === fieldName);
-      }
-      if (!field) {
-        field = filteredFields.find((f) => f.name === fieldName);
-      }
-      if (field) {
-        let value = "";
-        if (target.tagName === "INPUT") {
-          const inputElement = target;
-          if (inputElement.type === "checkbox") {
-            value = inputElement.checked ? "true" : "false";
-          } else if (inputElement.type === "radio") {
-            if (inputElement.checked) {
-              value = inputElement.value || "true";
-            }
-          } else {
-            value = inputElement.value;
-          }
-        } else if (target.tagName === "SELECT") {
-          value = target.value;
-        } else if (target.tagName === "TEXTAREA") {
-          value = target.value;
+    if (!iframe?.contentDocument) return;
+    const reapplyPreviews = () => {
+      const doc = iframe.contentDocument;
+      if (!doc) return;
+      const mainSig = signaturesRef.current["signature_field_main"];
+      if (mainSig) {
+        const existingSigPreviews = doc.querySelectorAll(".signiphi-signature-preview");
+        if (existingSigPreviews.length === 0) {
+          viewerRef.current?.previewSignature("signature_field_main", mainSig);
+        }
+      }
+      const mainInitials = fieldValuesRef.current["initials_field_main"];
+      if (mainInitials) {
+        const existingInitialsPreviews = doc.querySelectorAll(".signiphi-initials-preview");
+        if (existingInitialsPreviews.length === 0) {
+          viewerRef.current?.previewInitials("initials_field_main", mainInitials);
         }
-        setFieldValue(field.id, value);
-        logger.info(`[PDF FIELD CHANGE] Field ${field.id} changed to: "${value}"`);
-        updateFieldIndicator(field.id);
       }
     };
-    const formFields2 = doc.querySelectorAll("input, select, textarea");
-    formFields2.forEach((field) => {
-      field.addEventListener("change", handlePdfFieldChange);
-      field.addEventListener("input", handlePdfFieldChange);
+    let debounceTimeout;
+    const debouncedReapply = () => {
+      clearTimeout(debounceTimeout);
+      debounceTimeout = setTimeout(reapplyPreviews, 150);
+    };
+    const observer = new MutationObserver(debouncedReapply);
+    const annotationLayers = iframe.contentDocument.querySelectorAll(".annotationLayer");
+    annotationLayers.forEach((layer) => {
+      observer.observe(layer, { childList: true, subtree: false });
     });
-    logger.info("[PDF FIELD CHANGE] Attached change listeners to", formFields2.length, "PDF form fields");
     return () => {
-      formFields2.forEach((field) => {
-        field.removeEventListener("change", handlePdfFieldChange);
-        field.removeEventListener("input", handlePdfFieldChange);
-      });
+      observer.disconnect();
+      clearTimeout(debounceTimeout);
     };
-  }, [isPdfLoaded, viewMode, filteredFields, setFieldValue, updateFieldIndicator]);
+  }, [isPdfLoaded]);
   useEffect(() => {
     const fieldsWithAcks = filteredFields.filter((f) => f.acknowledgements && f.acknowledgements.length > 0);
     if (fieldsWithAcks.length > 0) {
@@ -7302,24 +8736,33 @@ function SubmissionForm({
     })));
   }, [filteredFields]);
   useEffect(() => {
-    if (!isPdfLoaded || !viewerRef.current?.attachFieldClickInterceptors) {
+    if (isPdfLoaded && viewerRef.current?.setFieldMetadata && filteredFields.length > 0) {
+      viewerRef.current.setFieldMetadata(filteredFields);
+      logger.info("[FIELD METADATA] Set field metadata for PDF viewer:", filteredFields.length, "fields");
+    }
+  }, [isPdfLoaded, filteredFields]);
+  useEffect(() => {
+    if (!isPdfLoaded || !viewerRef.current?.attachFieldClickInterceptors || !viewerRef.current?.attachFieldChangeListeners) {
       return;
     }
-    const timeoutId = setTimeout(() => {
-      viewerRef.current?.attachFieldClickInterceptors((fieldName) => {
+    let changeListenerCleanup = null;
+    const timeoutId = setTimeout(async () => {
+      changeListenerCleanup = await viewerRef.current?.attachFieldChangeListeners((fieldName, value) => {
+        const field = resolveField(filteredFields, fieldName);
+        if (field) {
+          setFieldValue(field.id, value);
+          fieldValuesRef.current = {
+            ...fieldValuesRef.current,
+            [field.id]: value
+          };
+          logger.info(`[PDF FIELD CHANGE] Field ${field.id} changed to: "${value}"`);
+          updateFieldIndicatorRef.current(field.id);
+        }
+      }) || null;
+      await viewerRef.current?.attachFieldClickInterceptors((fieldName, element) => {
         logger.info(`[PDF Click] Checking field: ${fieldName}`);
         logger.info(`[PDF Click] Available fields:`, filteredFields.map((f) => ({ id: f.id, fieldId: f.fieldId, name: f.name, acks: f.acknowledgements?.length || 0 })));
-        let field = filteredFields.find((f) => f.fieldId === fieldName);
-        if (!field) {
-          field = filteredFields.find((f) => f.id === fieldName);
-        }
-        if (!field) {
-          field = filteredFields.find((f) => f.name === fieldName);
-        }
-        if (!field) {
-          const cleanFieldName = fieldName.replace(/_signature$|_initials$|_date$/i, "");
-          field = filteredFields.find((f) => f.fieldId === cleanFieldName || f.id === cleanFieldName || f.name === cleanFieldName);
-        }
+        const field = resolveField(filteredFields, fieldName);
         if (!field) {
           logger.info(`[PDF Click] Field not found: ${fieldName}`);
           return true;
@@ -7334,6 +8777,7 @@ function SubmissionForm({
             if (!isAcked) {
               logger.info(`[PDF Click] Blocking ${field.type} field and showing acknowledgement modal`);
               setCurrentAcknowledgementField(field);
+              setCurrentAcknowledgementFieldName(fieldName);
               setAcknowledgementModalOpen(true);
               return false;
             }
@@ -7348,6 +8792,10 @@ function SubmissionForm({
                 setSignature(field.id, collected);
               } else if (field.type === "initials") {
                 setFieldValue(field.id, collected);
+                fieldValuesRef.current = {
+                  ...fieldValuesRef.current,
+                  [field.id]: collected
+                };
               }
               updateFieldIndicator(field.id);
             }
@@ -7376,15 +8824,27 @@ function SubmissionForm({
           return false;
         }
         let shouldBlock = false;
-        if (!field.acknowledgements || field.acknowledgements.length === 0) {
-          logger.info(`[PDF Click] Field has no acknowledgements`);
+        const wasRecentlyAcknowledged = recentlyAcknowledgedFieldsRef.current.has(field.id);
+        if (wasRecentlyAcknowledged) {
+          logger.info(`[PDF Click] Field was recently acknowledged, skipping check`);
           shouldBlock = false;
         } else {
-          const isAcked = isFieldFullyAcknowledged(field.id);
-          logger.info(`[PDF Click] Field is fully acknowledged: ${isAcked}`);
-          shouldBlock = !isAcked;
+          if (!field.acknowledgements || field.acknowledgements.length === 0) {
+            logger.info(`[PDF Click] Field has no acknowledgements`);
+            shouldBlock = false;
+          } else {
+            const isAcked = isFieldFullyAcknowledged(field.id);
+            logger.info(`[PDF Click] Field is fully acknowledged: ${isAcked}`);
+            shouldBlock = !isAcked;
+          }
         }
-        if (!shouldBlock) {
+        if (shouldBlock) {
+          logger.info(`[PDF Click] Blocking field and showing modal`);
+          setCurrentAcknowledgementField(field);
+          setCurrentAcknowledgementFieldName(fieldName);
+          currentAcknowledgementElementRef.current = element || null;
+          acknowledgementTriggerSourceRef.current = "pdf-click";
+          setAcknowledgementModalOpen(true);
           try {
             const iframe = document.querySelector("iframe");
             if (iframe?.contentDocument) {
@@ -7392,23 +8852,140 @@ function SubmissionForm({
               navigationHighlights.forEach((el) => el.classList.remove("active-required-field"));
               const navigationAnnotationHighlights = iframe.contentDocument.querySelectorAll(".active-required-field-annotation");
               navigationAnnotationHighlights.forEach((el) => el.classList.remove("active-required-field-annotation"));
-              logger.info("[PDF Click] Cleared navigation highlights (interaction allowed)");
+              logger.info("[PDF Click] Cleared navigation highlights (blocked)");
             }
           } catch (error) {
             logger.warn("[PDF Click] Failed to clear navigation highlights:", error);
           }
+          return false;
         }
-        if (shouldBlock) {
-          logger.info(`[PDF Click] Blocking field and showing modal`);
-          setCurrentAcknowledgementField(field);
-          setAcknowledgementModalOpen(true);
+        if (field.type === "date") {
+          logger.info(`[PDF Click] Opening calendar for date field: ${field.id}`);
+          try {
+            const iframe = document.querySelector("iframe");
+            if (iframe?.contentDocument) {
+              const formElement = iframe.contentDocument.querySelector(
+                `input[name="${fieldName}"], input[data-element-id="${fieldName}"]`
+              );
+              if (formElement) {
+                const rect = formElement.getBoundingClientRect();
+                const iframeRect = iframe.getBoundingClientRect();
+                const position = {
+                  x: Math.round(iframeRect.left + rect.left),
+                  y: Math.round(iframeRect.top + rect.top),
+                  width: Math.round(rect.width),
+                  height: Math.round(rect.height)
+                };
+                setCurrentDateField(field);
+                setDateFieldPosition(position);
+                setDateCalendarOpen(true);
+              }
+            }
+          } catch (error) {
+            logger.error("[PDF Click] Failed to get field position:", error);
+          }
+          try {
+            const iframe = document.querySelector("iframe");
+            if (iframe?.contentDocument) {
+              const navigationHighlights = iframe.contentDocument.querySelectorAll(".active-required-field");
+              navigationHighlights.forEach((el) => el.classList.remove("active-required-field"));
+              const navigationAnnotationHighlights = iframe.contentDocument.querySelectorAll(".active-required-field-annotation");
+              navigationAnnotationHighlights.forEach((el) => el.classList.remove("active-required-field-annotation"));
+              logger.info("[PDF Click] Cleared navigation highlights (calendar)");
+            }
+          } catch (error) {
+            logger.warn("[PDF Click] Failed to clear navigation highlights:", error);
+          }
           return false;
         }
+        if (!shouldBlock) {
+          try {
+            const iframe = document.querySelector("iframe");
+            if (iframe?.contentDocument) {
+              const navigationHighlights = iframe.contentDocument.querySelectorAll(".active-required-field");
+              navigationHighlights.forEach((el) => el.classList.remove("active-required-field"));
+              const navigationAnnotationHighlights = iframe.contentDocument.querySelectorAll(".active-required-field-annotation");
+              navigationAnnotationHighlights.forEach((el) => el.classList.remove("active-required-field-annotation"));
+              logger.info("[PDF Click] Cleared navigation highlights (interaction allowed)");
+            }
+          } catch (error) {
+            logger.warn("[PDF Click] Failed to clear navigation highlights:", error);
+          }
+        }
         return true;
       });
     }, 500);
-    return () => clearTimeout(timeoutId);
+    return () => {
+      clearTimeout(timeoutId);
+      if (changeListenerCleanup) {
+        changeListenerCleanup();
+      }
+    };
   }, [isPdfLoaded, filteredFields, isFieldFullyAcknowledged, hasCollectedSignature, getCollectedSignature, setSignature, setFieldValue, updateFieldIndicator]);
+  useEffect(() => {
+    if (!isPdfLoaded || !viewerRef.current?.addDateFieldIndicator) {
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      const dateFields = filteredFields.filter((f) => f.type === "date");
+      logger.info(`[DATE INDICATORS] Adding calendar icons to ${dateFields.length} date fields`);
+      dateFields.forEach((field) => {
+        try {
+          viewerRef.current?.addDateFieldIndicator(field.name);
+          logger.info(`[DATE INDICATORS] Added calendar icon to: ${field.name}`);
+        } catch (error) {
+          logger.error(`[DATE INDICATORS] Failed to add calendar icon to ${field.name}:`, error);
+        }
+      });
+      const iframe = document.querySelector("iframe");
+      if (iframe?.contentDocument) {
+        const calendarIndicators = iframe.contentDocument.querySelectorAll(".signiphi-date-field-indicator");
+        calendarIndicators.forEach((indicator) => {
+          indicator.addEventListener("click", (event) => {
+            event.stopPropagation();
+            event.preventDefault();
+            const annotationSection = indicator.closest("section");
+            if (annotationSection) {
+              const formElement = annotationSection.querySelector("input, textarea");
+              if (formElement) {
+                const fieldName = formElement.getAttribute("name") || formElement.getAttribute("data-element-id") || "";
+                let field = filteredFields.find((f) => f.fieldId === fieldName || f.id === fieldName || f.name === fieldName);
+                if (!field) {
+                  const cleanFieldName = fieldName.replace(/_date$/i, "");
+                  field = filteredFields.find((f) => f.fieldId === cleanFieldName || f.id === cleanFieldName || f.name === cleanFieldName);
+                }
+                if (field && field.type === "date") {
+                  logger.info(`[DATE INDICATOR CLICK] Opening calendar for: ${field.id}`);
+                  const hasAcknowledgements = field.acknowledgements && field.acknowledgements.length > 0;
+                  if (hasAcknowledgements && !isFieldFullyAcknowledged(field.id)) {
+                    logger.info(`[DATE INDICATOR CLICK] Showing acknowledgement modal first`);
+                    setCurrentAcknowledgementField(field);
+                    setCurrentAcknowledgementFieldName(fieldName);
+                    setAcknowledgementModalOpen(true);
+                    return;
+                  }
+                  const rect = formElement.getBoundingClientRect();
+                  const iframeRect = iframe.getBoundingClientRect();
+                  const position = {
+                    x: Math.round(iframeRect.left + rect.left),
+                    y: Math.round(iframeRect.top + rect.top),
+                    width: Math.round(rect.width),
+                    height: Math.round(rect.height)
+                  };
+                  logger.info("[DATE INDICATOR CLICK] Opening calendar at position:", position);
+                  setCurrentDateField(field);
+                  setDateFieldPosition(position);
+                  setDateCalendarOpen(true);
+                }
+              }
+            }
+          });
+        });
+        logger.info(`[DATE INDICATORS] Attached click handlers to ${calendarIndicators.length} calendar icons`);
+      }
+    }, 600);
+    return () => clearTimeout(timeoutId);
+  }, [isPdfLoaded, filteredFields, isFieldFullyAcknowledged]);
   const prevViewModeRef = useRef(viewMode);
   useEffect(() => {
     const syncFieldsOnViewChange = async () => {
@@ -7448,6 +9025,9 @@ function SubmissionForm({
                 }
               }
             }
+            if (field.type === "radio" && (normalizedPdfValue === "true" || normalizedPdfValue === "false")) {
+              normalizedPdfValue = void 0;
+            }
             if (field.type === "date" && pdfValue) {
               const validation = parseAndValidateDate(pdfValue);
               if (!validation.isValid) {
@@ -7461,8 +9041,12 @@ function SubmissionForm({
                 normalizedPdfValue = validation.isoString;
               }
             }
-            if (normalizedPdfValue && normalizedPdfValue !== currentReactValue) {
+            const isUnresolvedRadioIndex = field.type === "radio" && normalizedPdfValue?.includes("__RADIO_OPTION_INDEX_");
+            const pdfFieldReported = field.id in pdfValues;
+            if (normalizedPdfValue && normalizedPdfValue !== currentReactValue && !isUnresolvedRadioIndex) {
               setFieldValue(field.id, normalizedPdfValue);
+            } else if (pdfFieldReported && !normalizedPdfValue && currentReactValue) {
+              setFieldValue(field.id, "");
             }
           }
           if (invalidDates.length > 0) {
@@ -7529,14 +9113,76 @@ function SubmissionForm({
         }
       }
       updateFieldIndicator(fieldId);
+      if (field && field.type === "initials") {
+        viewerRef.current?.previewInitials("initials_field_main", value || null);
+      }
     },
     [setFieldValue, filteredFields, updateFieldIndicator]
   );
-  const handleAcknowledgementRequired = useCallback((field) => {
+  const handleAcknowledgementRequired = useCallback((field, element, fieldName) => {
     if (readOnly) return;
     setCurrentAcknowledgementField(field);
+    if (element) {
+      currentAcknowledgementElementRef.current = element;
+      logger.info(`[ACK REQUIRED] Stored element reference for field ${field.id}`, {
+        elementTag: element.tagName,
+        dataElementId: element.getAttribute("data-element-id")
+      });
+    }
+    if (fieldName) {
+      setCurrentAcknowledgementFieldName(fieldName);
+      logger.info(`[ACK REQUIRED] Stored fieldName: ${fieldName} for field ${field.id}`);
+    }
     setAcknowledgementModalOpen(true);
   }, [readOnly]);
+  const handleAcknowledgementModalOpenChange = useCallback((open) => {
+    setAcknowledgementModalOpen(open);
+    if (acknowledgementCleanupTimeoutRef.current) {
+      clearTimeout(acknowledgementCleanupTimeoutRef.current);
+      acknowledgementCleanupTimeoutRef.current = null;
+    }
+    if (!open) {
+      acknowledgementCleanupTimeoutRef.current = setTimeout(() => {
+        if (acknowledgementTriggerSourceRef.current !== null) {
+          acknowledgementTriggerSourceRef.current = null;
+          currentAcknowledgementElementRef.current = null;
+          logger.info("[ACK MODAL] Cleaned up refs after modal dismiss (not completed)");
+        }
+        acknowledgementCleanupTimeoutRef.current = null;
+      }, 500);
+    }
+  }, []);
+  const handleDateSelect = useCallback(async (dateValue) => {
+    if (readOnly || !currentDateField) return;
+    logger.info(`[DATE SELECT] Selected date for field ${currentDateField.id}:`, dateValue);
+    setFieldValue(currentDateField.id, dateValue);
+    try {
+      await setFormFieldValues({ [currentDateField.id]: dateValue });
+      const pdfApp = viewerRef.current?.getPDFViewerApplication?.();
+      const pdfDocument = pdfApp?.pdfDocument;
+      if (pdfDocument?.annotationStorage && typeof pdfDocument.getFieldObjects === "function") {
+        const fieldObjects = await pdfDocument.getFieldObjects() || {};
+        const widgets = fieldObjects[currentDateField.id];
+        if (widgets?.[0]?.id) {
+          pdfDocument.annotationStorage.setValue(widgets[0].id, { value: dateValue });
+        }
+      }
+      logger.info(`[DATE SELECT] Updated PDF field ${currentDateField.id}`);
+    } catch (error) {
+      logger.error(`[DATE SELECT] Failed to update PDF field:`, error);
+    }
+    if (dateValue) {
+      const validation = parseAndValidateDate(dateValue);
+      if (validation.isValid) {
+        setValidationErrors(
+          (prev) => prev.filter(
+            (error) => !error.includes("date field(s) contain invalid values") || !error.includes(currentDateField.label || currentDateField.id)
+          )
+        );
+      }
+    }
+    updateFieldIndicator(currentDateField.id);
+  }, [readOnly, currentDateField, setFieldValue, setFormFieldValues, updateFieldIndicator]);
   const handleSignatureClick = useCallback((field) => {
     if (readOnly) return;
     logger.info(`[SIGNATURE CLICK] Field:`, {
@@ -7552,6 +9198,10 @@ function SubmissionForm({
           setSignature(field.id, collected);
         } else if (field.type === "initials") {
           setFieldValue(field.id, collected);
+          fieldValuesRef.current = {
+            ...fieldValuesRef.current,
+            [field.id]: collected
+          };
         }
         logger.info(`[SIGNATURE CLICK] Auto-placed ${fieldType} for field ${field.id}`);
         updateFieldIndicator(field.id);
@@ -7593,6 +9243,7 @@ function SubmissionForm({
       }
     }
     let highlightedFieldElement = null;
+    let pdfFieldName = field.name;
     try {
       const iframe = document.querySelector("iframe");
       if (iframe?.contentDocument) {
@@ -7653,7 +9304,6 @@ function SubmissionForm({
           iframe.contentDocument.head.appendChild(style);
           logger.info("[REQUIRED NAV] Added CSS styles");
         }
-        let pdfFieldName = field.name;
         const pdfApp = viewerRef.current?.getPDFViewerApplication?.();
         if (pdfApp?.pdfDocument?.getData) {
           try {
@@ -7774,7 +9424,8 @@ function SubmissionForm({
     if (field.acknowledgements && field.acknowledgements.length > 0) {
       if (!isFieldFullyAcknowledged(field.id)) {
         logger.info(`[REQUIRED NAV] Field has unacknowledged items, opening acknowledgement modal`);
-        handleAcknowledgementRequired(field);
+        acknowledgementTriggerSourceRef.current = "navigation";
+        handleAcknowledgementRequired(field, highlightedFieldElement || void 0, pdfFieldName);
         return;
       }
     }
@@ -7828,13 +9479,25 @@ function SubmissionForm({
       setFieldValue(currentInitialsField.id, initialsText);
       collectSignature("initials", initialsText);
       setFieldValue("initials_field_main", initialsText);
+      fieldValuesRef.current = {
+        ...fieldValuesRef.current,
+        [currentInitialsField.id]: initialsText,
+        "initials_field_main": initialsText
+      };
+      const fieldIdToUpdate = currentInitialsField.id;
       setCurrentInitialsField(null);
       setInitialsModalOpen(false);
+      updateFieldIndicator(fieldIdToUpdate);
+      viewerRef.current?.previewInitials("initials_field_main", initialsText || null);
     },
-    [currentInitialsField, setFieldValue, collectSignature]
+    [currentInitialsField, setFieldValue, collectSignature, updateFieldIndicator]
   );
   const handleAcknowledgementComplete = useCallback(async (fieldId) => {
     logger.info(`[ACK COMPLETE] Field ${fieldId} fully acknowledged, continuing interaction`);
+    recentlyAcknowledgedFieldsRef.current.set(fieldId, Date.now());
+    setTimeout(() => {
+      recentlyAcknowledgedFieldsRef.current.delete(fieldId);
+    }, 3e3);
     const field = filteredFields.find((f) => f.id === fieldId);
     if (!field) {
       logger.warn(`[ACK COMPLETE] Field ${fieldId} not found`);
@@ -7862,30 +9525,165 @@ function SubmissionForm({
           setInitialsModalOpen(true);
         }
       }
+    } else if (field.type === "date") {
+      logger.info(`[ACK COMPLETE] Date field, opening calendar`);
+      try {
+        await new Promise((resolve) => setTimeout(resolve, 200));
+        const fieldName = currentAcknowledgementFieldName || field.fieldId || field.name;
+        logger.info(`[ACK COMPLETE] Looking for field with name: ${fieldName}`);
+        const iframe = document.querySelector("iframe");
+        if (iframe?.contentDocument) {
+          const formElement = iframe.contentDocument.querySelector(
+            `input[name="${fieldName}"], input[data-element-id="${fieldName}"]`
+          );
+          if (formElement) {
+            const rect = formElement.getBoundingClientRect();
+            const iframeRect = iframe.getBoundingClientRect();
+            const position = {
+              x: Math.round(iframeRect.left + rect.left),
+              y: Math.round(iframeRect.top + rect.top),
+              width: Math.round(rect.width),
+              height: Math.round(rect.height)
+            };
+            setCurrentDateField(field);
+            setDateFieldPosition(position);
+            setDateCalendarOpen(true);
+            logger.info(`[ACK COMPLETE] Opened calendar for date field in PDF view`);
+          } else {
+            logger.warn(`[ACK COMPLETE] Date field element not found in PDF with name: ${fieldName}`);
+          }
+        }
+      } catch (error) {
+        logger.error("[ACK COMPLETE] Failed to open calendar:", error);
+      }
     } else {
-      logger.info(`[ACK COMPLETE] Regular field, attempting to focus in PDF`);
+      const triggerSource = acknowledgementTriggerSourceRef.current;
+      logger.info(`[ACK COMPLETE] Regular field (${field.type}), trigger: ${triggerSource}`);
+      if (triggerSource === "navigation" && (field.type === "checkbox" || field.type === "radio")) {
+        logger.info(`[ACK COMPLETE] Skipping auto-interaction for ${field.type} via navigation (unclear intent)`);
+        acknowledgementTriggerSourceRef.current = null;
+        currentAcknowledgementElementRef.current = null;
+        return;
+      }
       try {
-        await new Promise((resolve) => setTimeout(resolve, 100));
+        await new Promise((resolve) => setTimeout(resolve, 200));
+        const fieldName = currentAcknowledgementFieldName || field.fieldId || field.name;
+        logger.info(`[ACK COMPLETE] Looking for field with name: ${fieldName}`);
         const iframe = document.querySelector("iframe");
         if (iframe?.contentDocument) {
-          const fieldElement = iframe.contentDocument.querySelector(`[data-element-id="${field.id}"]`);
-          if (fieldElement) {
-            fieldElement.focus();
-            fieldElement.scrollIntoView({ behavior: "smooth", block: "center" });
-            logger.info(`[ACK COMPLETE] Focused field in PDF`);
+          if (field.type === "dropdown") {
+            const storedElement = currentAcknowledgementElementRef.current;
+            let selectElement = null;
+            if (storedElement && storedElement.tagName === "SELECT") {
+              selectElement = storedElement;
+              logger.info(`[ACK COMPLETE] Using stored dropdown element`);
+            } else {
+              selectElement = iframe.contentDocument.querySelector(
+                `select[name="${fieldName}"], select[data-element-id="${fieldName}"]`
+              );
+              logger.info(`[ACK COMPLETE] Querying for dropdown element`);
+            }
+            if (selectElement) {
+              selectElement.scrollIntoView({ behavior: "smooth", block: "center" });
+              await new Promise((resolve) => setTimeout(resolve, 200));
+              selectElement.focus();
+              await new Promise((resolve) => setTimeout(resolve, 100));
+              try {
+                if ("showPicker" in selectElement) {
+                  selectElement.showPicker();
+                  logger.info(`[ACK COMPLETE] Opened dropdown using showPicker() API`);
+                } else {
+                  logger.info(`[ACK COMPLETE] showPicker() not supported, dropdown is focused`);
+                }
+              } catch (error) {
+                logger.warn(`[ACK COMPLETE] showPicker() failed (may require user gesture):`, error);
+              }
+            } else {
+              logger.warn(`[ACK COMPLETE] Dropdown element not found with name: ${fieldName}`);
+            }
+          } else if (field.type === "radio") {
+            const storedElement = currentAcknowledgementElementRef.current;
+            if (storedElement && storedElement.getAttribute("type") === "radio") {
+              storedElement.scrollIntoView({ behavior: "smooth", block: "center" });
+              await new Promise((resolve) => setTimeout(resolve, 200));
+              storedElement.click();
+              logger.info(`[ACK COMPLETE] Clicked specific radio option with value: ${storedElement.value}`);
+            } else {
+              const radioElement = iframe.contentDocument.querySelector(
+                `input[type="radio"][name="${fieldName}"], input[type="radio"][data-element-id="${fieldName}"]`
+              );
+              if (radioElement) {
+                radioElement.scrollIntoView({ behavior: "smooth", block: "center" });
+                await new Promise((resolve) => setTimeout(resolve, 200));
+                radioElement.focus();
+                logger.info(`[ACK COMPLETE] Focused radio button group (fallback)`);
+              } else {
+                logger.warn(`[ACK COMPLETE] Radio element not found with name: ${fieldName}`);
+              }
+            }
+          } else {
+            const fieldElement = iframe.contentDocument.querySelector(
+              `input[name="${fieldName}"], input[data-element-id="${fieldName}"], textarea[name="${fieldName}"], textarea[data-element-id="${fieldName}"]`
+            );
+            if (fieldElement) {
+              fieldElement.scrollIntoView({ behavior: "smooth", block: "center" });
+              await new Promise((resolve) => setTimeout(resolve, 200));
+              if (field.type === "checkbox") {
+                fieldElement.click();
+                logger.info(`[ACK COMPLETE] Clicked checkbox field`);
+              } else {
+                fieldElement.focus();
+                logger.info(`[ACK COMPLETE] Focused text field`);
+              }
+            } else {
+              logger.warn(`[ACK COMPLETE] Field element not found with name: ${fieldName}`);
+            }
           }
         }
       } catch (error) {
-        logger.warn("[ACK COMPLETE] Failed to focus field:", error);
+        logger.warn("[ACK COMPLETE] Failed to interact with field:", error);
+      } finally {
+        acknowledgementTriggerSourceRef.current = null;
+        currentAcknowledgementElementRef.current = null;
       }
     }
-  }, [filteredFields, hasCollectedSignature, getCollectedSignature, setSignature]);
+  }, [filteredFields, hasCollectedSignature, getCollectedSignature, setSignature, setFieldValue, currentAcknowledgementFieldName]);
+  const handleBulkAcknowledgementComplete = useCallback((fieldIds) => {
+    logger.info(`[BULK ACK COMPLETE] Refreshing indicators for ${fieldIds.length} fields:`, fieldIds);
+    fieldIds.forEach((fieldId) => {
+      updateFieldIndicatorRef.current(fieldId);
+    });
+    const hasSignatureFields = fieldIds.some((id) => {
+      const field = filteredFields.find((f) => f.id === id);
+      return field?.type === "signature";
+    });
+    const hasInitialsFields2 = fieldIds.some((id) => {
+      const field = filteredFields.find((f) => f.id === id);
+      return field?.type === "initials";
+    });
+    if (hasSignatureFields) {
+      updateFieldIndicatorRef.current("signature_field_main");
+    }
+    if (hasInitialsFields2) {
+      updateFieldIndicatorRef.current("initials_field_main");
+    }
+  }, [filteredFields]);
   const validateForm = useCallback(async () => {
     const validationErrors2 = [];
     const currentFieldValues = fieldValuesRef.current;
     const currentSignatures = signaturesRef.current;
     const pdfFieldValues = await getFormFieldValues();
     const allFieldValues = { ...pdfFieldValues, ...currentFieldValues };
+    const currentTouched = touchedRef.current;
+    for (const [fieldId, pdfVal] of Object.entries(pdfFieldValues)) {
+      if (pdfVal === "") {
+        const reactVal = currentFieldValues[fieldId];
+        const fieldTouched = currentTouched[fieldId] || false;
+        if (!reactVal || reactVal.trim() === "" || !fieldTouched) {
+          allFieldValues[fieldId] = "";
+        }
+      }
+    }
     console.log("[VALIDATION] === MERGING SIGNATURES INTO allFieldValues ===");
     console.log("[VALIDATION] currentSignatures:", currentSignatures);
     for (const [fieldId, signatureValue] of Object.entries(currentSignatures)) {
@@ -7912,13 +9710,12 @@ function SubmissionForm({
       if (value && value.trim() !== "") {
         const validation = parseAndValidateDate(value);
         if (!validation.isValid) {
-          const fieldLabel = field.label || field.id;
           validationErrors2.push(
-            `${fieldLabel}: Invalid date format. Please use MM/DD/YYYY, YYYY-MM-DD, or similar standard format.`
+            `${getFieldDisplayName(field)}: Invalid date format. Please use MM/DD/YYYY, YYYY-MM-DD, or similar standard format.`
           );
         }
       } else if (field.required) {
-        validationErrors2.push(`${field.label || field.id} is required`);
+        validationErrors2.push(`${getFieldDisplayName(field)} is required`);
       }
     }
     const signatureFields = filteredFields.filter((f) => f.type === "signature");
@@ -7936,12 +9733,21 @@ function SubmissionForm({
         console.log("[VALIDATION] Value from allFieldValues:", value ? "(found, truncated): " + value.substring(0, 50) : "(MISSING)");
         if (!value || value.trim() === "") {
           console.log("[VALIDATION] ERROR: Field is required but missing!");
-          validationErrors2.push(`${field.label} is required`);
+          validationErrors2.push(`${getFieldDisplayName(field)} is required`);
         } else {
           console.log("[VALIDATION] OK: Field has value");
         }
       }
     }
+    const alreadyCheckedTypes = /* @__PURE__ */ new Set(["date", "signature", "initials"]);
+    for (const field of filteredFields) {
+      if (!field.required || alreadyCheckedTypes.has(field.type)) continue;
+      if (field.id === "signature_field_main" || field.id === "initials_field_main") continue;
+      const value = allFieldValues[field.id];
+      if (!value || typeof value === "string" && value.trim() === "") {
+        validationErrors2.push(`${getFieldDisplayName(field)} is required`);
+      }
+    }
     const isFieldsValid = validateFields(currentSignatures);
     if (!isFieldsValid) {
       for (const field of filteredFields) {
@@ -8051,6 +9857,16 @@ function SubmissionForm({
       const currentFieldValues = fieldValuesRef.current;
       const currentSignatures = signaturesRef.current;
       const finalFieldValues = { ...pdfFieldValues, ...currentFieldValues };
+      const currentTouchedSubmit = touchedRef.current;
+      for (const [fieldId, pdfVal] of Object.entries(pdfFieldValues)) {
+        if (pdfVal === "") {
+          const reactVal = currentFieldValues[fieldId];
+          const fieldTouched = currentTouchedSubmit[fieldId] || false;
+          if (!reactVal || reactVal.trim() === "" || !fieldTouched) {
+            finalFieldValues[fieldId] = "";
+          }
+        }
+      }
       console.log("[SUBMIT] === MERGING SIGNATURES INTO finalFieldValues FOR FLATTENING ===");
       console.log("[SUBMIT] currentSignatures:", currentSignatures);
       for (const [fieldId, signatureValue] of Object.entries(currentSignatures)) {
@@ -8073,6 +9889,11 @@ function SubmissionForm({
         }
       }
       if (enableAttachments) {
+        if (attachments.length === 0) {
+          setValidationErrors(["At least one attachment is required"]);
+          setIsSubmitting(false);
+          return;
+        }
         const attachmentValidation = validateAttachments();
         if (!attachmentValidation.isValid) {
           setValidationErrors(attachmentValidation.errors);
@@ -8164,28 +9985,34 @@ function SubmissionForm({
           return false;
         }
       }
-      return true;
-    }
-    for (const field of filteredFields) {
-      if (!field.required) continue;
-      if (field.id === "signature_field_main" || field.id === "initials_field_main") {
-        if (!hasSignature(field.id)) return false;
-        continue;
-      }
-      if (field.type === "signature" || field.type === "initials") {
-        if (!hasSignature(field.id)) return false;
-      } else {
-        const value = fieldValues[field.id];
-        if (!value || value.trim() === "") return false;
+    } else {
+      for (const field of filteredFields) {
+        if (!field.required) continue;
+        if (field.id === "signature_field_main" || field.id === "initials_field_main") {
+          if (!hasSignature(field.id)) return false;
+          continue;
+        }
+        if (field.type === "signature" || field.type === "initials") {
+          if (!hasSignature(field.id)) return false;
+        } else {
+          const value = fieldValues[field.id];
+          if (!value || value.trim() === "") return false;
+        }
       }
     }
+    if (enableAttachments && attachments.length === 0) {
+      return false;
+    }
     return true;
-  }, [filteredFields, fieldValues, hasSignature, showFullFieldsSidebar]);
+  }, [filteredFields, fieldValues, hasSignature, showFullFieldsSidebar, enableAttachments, attachments]);
   return /* @__PURE__ */ jsxs("div", { className: cn("signiphi-pdf-signer flex flex-col gap-4 md:gap-6 h-full overflow-auto px-2 md:px-0", className), children: [
-    documentTitle && /* @__PURE__ */ jsx(Card, { className: "flex-shrink-0 border-0 shadow-none", children: /* @__PURE__ */ jsx(CardHeader, { className: "space-y-2 p-0 pb-3 md:pb-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start justify-between gap-3 sm:gap-4", children: [
-      /* @__PURE__ */ jsx(CardTitle, { className: "text-2xl sm:text-3xl md:text-4xl font-bold text-primary tracking-tight flex-1", children: documentTitle }),
-      showPoweredBy && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(PoweredBySigniphi, {}) })
-    ] }) }) }),
+    (documentTitle || signingInstructions || showPoweredBy) && /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-start justify-between gap-3 sm:gap-4", children: [
+        documentTitle && /* @__PURE__ */ jsx("h1", { className: "text-2xl sm:text-3xl md:text-4xl font-bold text-primary tracking-tight flex-1", children: documentTitle }),
+        showPoweredBy && /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ jsx(PoweredBySigniphi, {}) })
+      ] }),
+      signingInstructions && /* @__PURE__ */ jsx("div", { className: "text-sm md:text-base text-muted-foreground", children: /* @__PURE__ */ jsx(SigningInstructions, { html: signingInstructions }) })
+    ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col lg:flex-row gap-4", children: [
       showPdfViewer && /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col bg-muted/30 rounded-lg overflow-hidden relative min-w-0 border-2", children: [
         /* @__PURE__ */ jsx(
@@ -8253,8 +10080,7 @@ function SubmissionForm({
             /* @__PURE__ */ jsx("div", { className: "p-1.5 md:p-2 bg-primary/10 rounded-lg", children: /* @__PURE__ */ jsx(FileText, { className: "h-5 w-5 md:h-6 md:w-6 text-primary" }) }),
             "Sign Document"
           ] }),
-          /* @__PURE__ */ jsx(CardDescription, { className: "text-muted-foreground text-sm md:text-base leading-relaxed text-primary", children: customMessage || "Complete the fields in the PDF and sign below" }),
-          signingInstructions && /* @__PURE__ */ jsx("div", { className: "mt-2 md:mt-3 text-xs md:text-sm leading-relaxed text-muted-foreground", children: /* @__PURE__ */ jsx(SigningInstructions, { html: signingInstructions }) })
+          /* @__PURE__ */ jsx(CardDescription, { className: "text-muted-foreground text-sm md:text-base leading-relaxed text-primary", children: customMessage || defaultSigningMessage })
         ] }),
         /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4 md:space-y-6 px-4 md:px-6", children: [
           validationErrors.length > 0 && /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
@@ -8372,7 +10198,11 @@ function SubmissionForm({
               onCollapseChange: setEditableFieldsCollapsed
             }
           ) }),
-          enableAttachments && /* @__PURE__ */ jsxs("div", { className: "mt-4 md:mt-6", children: [
+          enableAttachments && /* @__PURE__ */ jsxs("div", { className: "mt-4 md:mt-6 mb-6 md:mb-8", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: "Attachments" }),
+              /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-destructive", children: "(Required)" })
+            ] }),
             /* @__PURE__ */ jsx(
               AttachmentUpload,
               {
@@ -8382,10 +10212,12 @@ function SubmissionForm({
                 isUploading: isUploadingAttachments,
                 disabled: readOnly || isSubmitting,
                 maxFiles: maxAttachments,
-                formatSize
+                formatSize,
+                constraints: attachmentConstraints,
+                validationErrors: attachmentErrors.length > 0 ? attachmentErrors : void 0,
+                onClearErrors: clearAttachmentErrors
               }
-            ),
-            attachmentErrors.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 p-2 md:p-3 bg-destructive/10 border border-destructive/30 rounded-lg", children: /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside text-xs md:text-sm text-destructive space-y-1", children: attachmentErrors.map((error, index) => /* @__PURE__ */ jsx("li", { children: error }, index)) }) })
+            )
           ] })
         ] }),
         !readOnly && /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 p-4 md:p-6 border-t bg-gradient-to-b from-background to-muted/20", children: [
@@ -8453,7 +10285,7 @@ function SubmissionForm({
       AcknowledgementModal,
       {
         open: acknowledgementModalOpen,
-        onOpenChange: setAcknowledgementModalOpen,
+        onOpenChange: handleAcknowledgementModalOpenChange,
         field: currentAcknowledgementField,
         onAcknowledge: acknowledgeItem,
         isAcknowledged,
@@ -8470,7 +10302,19 @@ function SubmissionForm({
           unacknowledgedCount: unacknowledgedItems.length
         })),
         onAcknowledge: acknowledgeItem,
-        isAcknowledged
+        isAcknowledged,
+        onComplete: handleBulkAcknowledgementComplete
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      DateFieldCalendarPopup,
+      {
+        open: dateCalendarOpen,
+        onOpenChange: setDateCalendarOpen,
+        value: currentDateField ? fieldValues[currentDateField.id] || "" : "",
+        onSelect: handleDateSelect,
+        fieldPosition: dateFieldPosition,
+        fieldLabel: currentDateField?.label || currentDateField?.name
       }
     )
   ] });
@@ -8551,6 +10395,6 @@ function ErrorBoundary2({
   );
 }
 
-export { AcknowledgementModal, AcknowledgementsSidebar, AttachmentUpload, CheckboxRenderer, DateFieldRenderer, DropdownRenderer, EditableFieldsPanel, ErrorBoundary2 as ErrorBoundary, FormFieldRenderer, FormFieldsView, InitialsFieldRenderer, InitialsModal, PdfViewerStyled, PoweredBySigniphi, RadioGroupRenderer, SignatureCanvas, SignatureFieldRenderer, SignatureInitialsBox, SignatureModal, SignatureModalCore, SigningInstructions, SubmissionForm, TextFieldRenderer, TextLabelRenderer, ViewToggleToolbar };
+export { AcknowledgementModal, AcknowledgementsSidebar, AttachmentUpload, CheckboxRenderer, DateFieldRenderer, DropdownRenderer, EditableFieldsPanel, ErrorBoundary2 as ErrorBoundary, FormFieldRenderer, FormFieldsView, InitialsFieldRenderer, InitialsModal, PdfViewerStyled, PoweredBySigniphi, RadioGroupRenderer, SignatureCanvas, SignatureFieldRenderer, SignatureInitialsBox, SignatureModal, SignatureModalCore, SignatureTypeInput, SigningInstructions, SubmissionForm, TextFieldRenderer, TextLabelRenderer, ViewToggleToolbar };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map