@unlev/exeq 0.1.11 → 0.2.0

package/dist/index.js

@@ -30,9 +30,11 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/lib/index.ts
 var lib_exports = {};
 __export(lib_exports, {
+  BUILTIN_TRANSFORMS: () => BUILTIN_TRANSFORMS,
   DEFAULT_SIGNER_ROLES: () => DEFAULT_SIGNER_ROLES,
   DesignerView: () => DesignerView,
   FIELD_DEFAULTS: () => FIELD_DEFAULTS,
+  FONT_FAMILIES: () => FONT_FAMILIES,
   FieldNavigator: () => FieldNavigator,
   FieldPropertyPanel: () => FieldPropertyPanel,
   PdfViewer: () => PdfViewer,
@@ -43,15 +45,18 @@ __export(lib_exports, {
   createField: () => createField,
   downloadPdf: () => downloadPdf,
   generateFilledPdf: () => generateFilledPdf,
+  generateId: () => generateId,
   getSignerColor: () => getSignerColor,
   postPdfToCallback: () => postPdfToCallback,
   renderPdfPages: () => renderPdfPages,
+  resolveAllFormulas: () => resolveAllFormulas,
+  resolveFormula: () => resolveFormula,
   uniqueLabel: () => uniqueLabel
 });
 module.exports = __toCommonJS(lib_exports);
 
 // src/components/pdf-builder/DesignerView.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/types/pdf-builder.ts
@@ -77,6 +82,11 @@ var SIGNER_ROLE_COLORS = {
 function getSignerColor(role) {
   return SIGNER_ROLE_COLORS[role] || "#888888";
 }
+var FONT_FAMILIES = [
+  { value: "Helvetica", label: "Helvetica" },
+  { value: "Courier", label: "Courier New" },
+  { value: "TimesRoman", label: "Times New Roman" }
+];
 var FIELD_DEFAULTS = {
   text: {
     width: 20,
@@ -388,6 +398,7 @@ function FieldOverlayItem({
 }
 
 // src/components/pdf-builder/FieldPropertyPanel.tsx
+var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var INK_COLORS = [
   { value: "#000000", label: "Black" },
@@ -396,8 +407,9 @@ var INK_COLORS = [
 function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
   const color = getSignerColor(field.assignee);
   const isRedactField = field.type === "blackout" || field.type === "whiteout";
-  const showFontSize = field.type === "text" || field.type === "signed-date";
+  const isTextField = field.type === "text" || field.type === "signed-date";
   const showInkColor = field.type === "text" || field.type === "signature" || field.type === "initials" || field.type === "signed-date";
+  const [newOption, setNewOption] = (0, import_react2.useState)("");
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "field-property-panel", children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-header", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { style: { color }, children: field.label }),
@@ -470,6 +482,19 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         }
       )
     ] }),
+    isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Formula" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "text",
+          value: field.formula || "",
+          onChange: (e) => onUpdate(field.id, { formula: e.target.value || void 0 }),
+          placeholder: "e.g. {{Date Field | month}}"
+        }
+      ),
+      field.formula && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", children: "This field auto-computes from other fields. Signer cannot edit it." })
+    ] }),
     !isRedactField && field.type !== "checkbox" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "panel-field", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { className: "panel-checkbox-label", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "input",
@@ -481,7 +506,18 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
       ),
       "Required"
     ] }) }),
-    showFontSize && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+    isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Font" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "select",
+        {
+          value: field.fontFamily || "Helvetica",
+          onChange: (e) => onUpdate(field.id, { fontFamily: e.target.value }),
+          children: FONT_FAMILIES.map((f) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: f.value, children: f.label }, f.value))
+        }
+      )
+    ] }),
+    isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Font Size (pt)" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "input",
@@ -494,6 +530,49 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         }
       )
     ] }),
+    isTextField && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Letter Spacing" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "number",
+            min: "0",
+            max: "20",
+            step: "0.5",
+            value: field.letterSpacing || 0,
+            onChange: (e) => onUpdate(field.id, { letterSpacing: Number(e.target.value) })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field panel-field-half", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Line Height" }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "input",
+          {
+            type: "number",
+            min: "0.8",
+            max: "3",
+            step: "0.1",
+            value: field.lineHeight || 1.2,
+            onChange: (e) => onUpdate(field.id, { lineHeight: Number(e.target.value) })
+          }
+        )
+      ] })
+    ] }),
+    field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Max Characters (0 = unlimited)" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "input",
+        {
+          type: "number",
+          min: "0",
+          max: "9999",
+          value: field.maxLength || 0,
+          onChange: (e) => onUpdate(field.id, { maxLength: Number(e.target.value) })
+        }
+      )
+    ] }),
     showInkColor && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Ink Color" }),
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ink-color-picker", children: INK_COLORS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
@@ -506,12 +585,61 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         },
         c.value
       )) })
+    ] }),
+    field.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { children: "Predefined Options" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-options-list", children: [
+        (field.options || []).map((opt, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-option-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: opt }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              className: "panel-option-remove",
+              onClick: () => {
+                const updated = (field.options || []).filter((_, j) => j !== i);
+                onUpdate(field.id, { options: updated.length > 0 ? updated : void 0 });
+              },
+              children: "\xD7"
+            }
+          )
+        ] }, i)),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "panel-option-add", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              type: "text",
+              value: newOption,
+              onChange: (e) => setNewOption(e.target.value),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && newOption.trim()) {
+                  onUpdate(field.id, { options: [...field.options || [], newOption.trim()] });
+                  setNewOption("");
+                }
+              },
+              placeholder: "Add option..."
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: () => {
+                if (newOption.trim()) {
+                  onUpdate(field.id, { options: [...field.options || [], newOption.trim()] });
+                  setNewOption("");
+                }
+              },
+              children: "+"
+            }
+          )
+        ] })
+      ] }),
+      (field.options?.length ?? 0) > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
     ] })
   ] });
 }
 
 // src/components/pdf-builder/SignatureCanvas.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_perfect_freehand = require("perfect-freehand");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function getSvgPathFromStroke(stroke) {
@@ -535,11 +663,11 @@ function SignatureCanvas({
   className,
   inkColor = "#000000"
 }) {
-  const canvasRef = (0, import_react2.useRef)(null);
-  const [paths, setPaths] = (0, import_react2.useState)([]);
-  const [currentPath, setCurrentPath] = (0, import_react2.useState)(null);
-  const [isEmpty, setIsEmpty] = (0, import_react2.useState)(!initialValue);
-  (0, import_react2.useEffect)(() => {
+  const canvasRef = (0, import_react3.useRef)(null);
+  const [paths, setPaths] = (0, import_react3.useState)([]);
+  const [currentPath, setCurrentPath] = (0, import_react3.useState)(null);
+  const [isEmpty, setIsEmpty] = (0, import_react3.useState)(!initialValue);
+  (0, import_react3.useEffect)(() => {
     if (initialValue && canvasRef.current) {
       const ctx = canvasRef.current.getContext("2d");
       const img = new Image();
@@ -550,7 +678,7 @@ function SignatureCanvas({
       img.src = initialValue;
     }
   }, [initialValue, width, height]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -569,7 +697,7 @@ function SignatureCanvas({
       ctx.fill(path2d);
     }
   }, [paths, currentPath, width, height]);
-  const getPoint = (0, import_react2.useCallback)((e) => {
+  const getPoint = (0, import_react3.useCallback)((e) => {
     const canvas = canvasRef.current;
     const rect = canvas.getBoundingClientRect();
     const style = getComputedStyle(canvas);
@@ -587,17 +715,17 @@ function SignatureCanvas({
       e.pressure
     ];
   }, []);
-  const handlePointerDown = (0, import_react2.useCallback)((e) => {
+  const handlePointerDown = (0, import_react3.useCallback)((e) => {
     e.preventDefault();
     e.target.setPointerCapture(e.pointerId);
     setCurrentPath([getPoint(e)]);
   }, [getPoint]);
-  const handlePointerMove = (0, import_react2.useCallback)((e) => {
+  const handlePointerMove = (0, import_react3.useCallback)((e) => {
     if (!currentPath) return;
     e.preventDefault();
     setCurrentPath([...currentPath, getPoint(e)]);
   }, [currentPath, getPoint]);
-  const handlePointerUp = (0, import_react2.useCallback)(() => {
+  const handlePointerUp = (0, import_react3.useCallback)(() => {
     if (!currentPath) return;
     setPaths((prev) => [...prev, currentPath]);
     setCurrentPath(null);
@@ -608,7 +736,7 @@ function SignatureCanvas({
       }
     });
   }, [currentPath, onSign]);
-  const handleClear = (0, import_react2.useCallback)(() => {
+  const handleClear = (0, import_react3.useCallback)(() => {
     setPaths([]);
     setCurrentPath(null);
     setIsEmpty(true);
@@ -679,24 +807,24 @@ function DesignerView({
       ] })
     ] }) });
   }
-  const [pages, setPages] = (0, import_react3.useState)([]);
-  const [fields, setFields] = (0, import_react3.useState)(initialTemplate?.fields ?? []);
-  const [selectedFieldId, setSelectedFieldId] = (0, import_react3.useState)(null);
-  const [signerRoles, setSignerRoles] = (0, import_react3.useState)(initialTemplate?.signerRoles ?? [...DEFAULT_SIGNER_ROLES]);
-  const [activeRole, setActiveRole] = (0, import_react3.useState)("Sender");
-  const [activeFieldType, setActiveFieldType] = (0, import_react3.useState)("text");
-  const [loading, setLoading] = (0, import_react3.useState)(false);
-  const [pdfSource, setPdfSource] = (0, import_react3.useState)(null);
-  const [rightTab, setRightTab] = (0, import_react3.useState)("properties");
-  const [isAddingRole, setIsAddingRole] = (0, import_react3.useState)(false);
-  const [newRoleName, setNewRoleName] = (0, import_react3.useState)("");
-  const [draggingFieldType, setDraggingFieldType] = (0, import_react3.useState)(null);
-  const [panelWidth, setPanelWidth] = (0, import_react3.useState)(380);
-  const [clipboardField, setClipboardField] = (0, import_react3.useState)(null);
-  const dragGhostRef = (0, import_react3.useRef)(null);
-  const resizingRef = (0, import_react3.useRef)(false);
-  const lastStylesRef = (0, import_react3.useRef)({});
-  (0, import_react3.useEffect)(() => {
+  const [pages, setPages] = (0, import_react4.useState)([]);
+  const [fields, setFields] = (0, import_react4.useState)(initialTemplate?.fields ?? []);
+  const [selectedFieldId, setSelectedFieldId] = (0, import_react4.useState)(null);
+  const [signerRoles, setSignerRoles] = (0, import_react4.useState)(initialTemplate?.signerRoles ?? [...DEFAULT_SIGNER_ROLES]);
+  const [activeRole, setActiveRole] = (0, import_react4.useState)("Sender");
+  const [activeFieldType, setActiveFieldType] = (0, import_react4.useState)("text");
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [pdfSource, setPdfSource] = (0, import_react4.useState)(null);
+  const [rightTab, setRightTab] = (0, import_react4.useState)("properties");
+  const [isAddingRole, setIsAddingRole] = (0, import_react4.useState)(false);
+  const [newRoleName, setNewRoleName] = (0, import_react4.useState)("");
+  const [draggingFieldType, setDraggingFieldType] = (0, import_react4.useState)(null);
+  const [panelWidth, setPanelWidth] = (0, import_react4.useState)(380);
+  const [clipboardField, setClipboardField] = (0, import_react4.useState)(null);
+  const dragGhostRef = (0, import_react4.useRef)(null);
+  const resizingRef = (0, import_react4.useRef)(false);
+  const lastStylesRef = (0, import_react4.useRef)({});
+  (0, import_react4.useEffect)(() => {
     const pdfUrl = initialPdfUrl || initialTemplate?.pdfUrl;
     if (pdfUrl) {
       loadPdf(pdfUrl);
@@ -720,7 +848,7 @@ function DesignerView({
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [initialPdfUrl, initialTemplate]);
-  const loadPdf = (0, import_react3.useCallback)(async (source) => {
+  const loadPdf = (0, import_react4.useCallback)(async (source) => {
     setLoading(true);
     try {
       const rendered = await renderPdfPages(source);
@@ -732,7 +860,7 @@ function DesignerView({
       setLoading(false);
     }
   }, []);
-  const handleFileUpload = (0, import_react3.useCallback)((e) => {
+  const handleFileUpload = (0, import_react4.useCallback)((e) => {
     const file = e.target.files?.[0];
     if (!file) return;
     const reader = new FileReader();
@@ -741,7 +869,7 @@ function DesignerView({
     };
     reader.readAsArrayBuffer(file);
   }, [loadPdf]);
-  const handlePageClick = (0, import_react3.useCallback)((page, x, y) => {
+  const handlePageClick = (0, import_react4.useCallback)((page, x, y) => {
     const field = createField(activeFieldType, activeRole, page, x, y, fields);
     const sticky = lastStylesRef.current[activeFieldType];
     const styledField = sticky ? { ...field, ...sticky } : field;
@@ -749,10 +877,10 @@ function DesignerView({
     setSelectedFieldId(styledField.id);
     setRightTab("properties");
   }, [activeFieldType, activeRole, fields]);
-  const handleFieldMove = (0, import_react3.useCallback)((id, page, x, y) => {
+  const handleFieldMove = (0, import_react4.useCallback)((id, page, x, y) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, page, x, y } : f));
   }, []);
-  const handleFieldResize = (0, import_react3.useCallback)((id, width, height) => {
+  const handleFieldResize = (0, import_react4.useCallback)((id, width, height) => {
     setFields((prev) => {
       const field = prev.find((f) => f.id === id);
       if (field) {
@@ -762,7 +890,7 @@ function DesignerView({
       return prev.map((f) => f.id === id ? { ...f, width, height } : f);
     });
   }, []);
-  const handleFieldUpdate = (0, import_react3.useCallback)((id, updates) => {
+  const handleFieldUpdate = (0, import_react4.useCallback)((id, updates) => {
     setFields((prev) => {
       if (updates.label !== void 0) {
         const otherLabels = prev.filter((f) => f.id !== id).map((f) => f.label);
@@ -782,11 +910,11 @@ function DesignerView({
       return updated;
     });
   }, []);
-  const handleFieldDelete = (0, import_react3.useCallback)((id) => {
+  const handleFieldDelete = (0, import_react4.useCallback)((id) => {
     setFields((prev) => prev.filter((f) => f.id !== id));
     if (selectedFieldId === id) setSelectedFieldId(null);
   }, [selectedFieldId]);
-  const handleAddRole = (0, import_react3.useCallback)(() => {
+  const handleAddRole = (0, import_react4.useCallback)(() => {
     const name = newRoleName.trim();
     if (name && !signerRoles.includes(name)) {
       setSignerRoles((prev) => [...prev, name]);
@@ -794,12 +922,12 @@ function DesignerView({
     setNewRoleName("");
     setIsAddingRole(false);
   }, [newRoleName, signerRoles]);
-  const handleRemoveRole = (0, import_react3.useCallback)((role) => {
+  const handleRemoveRole = (0, import_react4.useCallback)((role) => {
     setSignerRoles((prev) => prev.filter((r) => r !== role));
     setFields((prev) => prev.map((f) => f.assignee === role ? { ...f, assignee: signerRoles[0] } : f));
     if (activeRole === role) setActiveRole(signerRoles[0]);
   }, [signerRoles, activeRole]);
-  const handleExport = (0, import_react3.useCallback)(() => {
+  const handleExport = (0, import_react4.useCallback)(() => {
     const template = {
       fields,
       signerRoles,
@@ -819,7 +947,7 @@ function DesignerView({
     }
     window.parent?.postMessage({ type: "template-saved", template }, "*");
   }, [fields, signerRoles, pdfSource, onSave]);
-  const handlePaletteDragStart = (0, import_react3.useCallback)((e, type) => {
+  const handlePaletteDragStart = (0, import_react4.useCallback)((e, type) => {
     setDraggingFieldType(type);
     e.dataTransfer.setData("application/exeq-field-type", type);
     e.dataTransfer.effectAllowed = "copy";
@@ -836,14 +964,14 @@ function DesignerView({
     e.dataTransfer.setDragImage(ghost, 40, 16);
     dragGhostRef.current = ghost;
   }, [activeRole]);
-  const handlePaletteDragEnd = (0, import_react3.useCallback)(() => {
+  const handlePaletteDragEnd = (0, import_react4.useCallback)(() => {
     setDraggingFieldType(null);
     if (dragGhostRef.current) {
       document.body.removeChild(dragGhostRef.current);
       dragGhostRef.current = null;
     }
   }, []);
-  const handleDropOnPage = (0, import_react3.useCallback)((page, x, y, fieldType) => {
+  const handleDropOnPage = (0, import_react4.useCallback)((page, x, y, fieldType) => {
     const field = createField(fieldType, activeRole, page, x, y, fields);
     const sticky = lastStylesRef.current[fieldType];
     const styledField = sticky ? { ...field, ...sticky } : field;
@@ -851,7 +979,7 @@ function DesignerView({
     setSelectedFieldId(styledField.id);
     setRightTab("properties");
   }, [activeRole, fields]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key !== "Delete" && e.key !== "Backspace") return;
       if (!selectedFieldId) return;
@@ -866,7 +994,7 @@ function DesignerView({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [selectedFieldId, handleFieldDelete]);
-  (0, import_react3.useEffect)(() => {
+  (0, import_react4.useEffect)(() => {
     const handleKeyDown = (e) => {
       const tag = (document.activeElement?.tagName || "").toLowerCase();
       if (tag === "input" || tag === "textarea" || tag === "select") return;
@@ -898,7 +1026,7 @@ function DesignerView({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [selectedFieldId, fields, clipboardField]);
-  const handleResizeStart = (0, import_react3.useCallback)((e) => {
+  const handleResizeStart = (0, import_react4.useCallback)((e) => {
     e.preventDefault();
     resizingRef.current = true;
     const startX = e.clientX;
@@ -923,7 +1051,7 @@ function DesignerView({
     return a.x - b.x;
   });
   const selectedField = fields.find((f) => f.id === selectedFieldId) || null;
-  const renderFieldContent = (0, import_react3.useCallback)((field) => {
+  const renderFieldContent = (0, import_react4.useCallback)((field) => {
     if (field.type === "blackout" || field.type === "whiteout") {
       return null;
     }
@@ -1160,10 +1288,15 @@ function DesignerView({
 }
 
 // src/components/pdf-builder/SignerView.tsx
-var import_react4 = require("react");
+var import_react6 = require("react");
 
 // src/utils/pdfFiller.ts
 var import_pdf_lib = require("pdf-lib");
+var FONT_MAP = {
+  "Helvetica": import_pdf_lib.StandardFonts.Helvetica,
+  "Courier": import_pdf_lib.StandardFonts.Courier,
+  "TimesRoman": import_pdf_lib.StandardFonts.TimesRoman
+};
 async function generateFilledPdf(pdfSource, fields) {
   let pdfBytes;
   if (typeof pdfSource === "string") {
@@ -1173,7 +1306,12 @@ async function generateFilledPdf(pdfSource, fields) {
     pdfBytes = pdfSource;
   }
   const pdfDoc = await import_pdf_lib.PDFDocument.load(pdfBytes);
-  const font = await pdfDoc.embedFont(import_pdf_lib.StandardFonts.Helvetica);
+  const fontCache = /* @__PURE__ */ new Map();
+  const usedFontKeys = new Set(fields.map((f) => f.fontFamily || "Helvetica"));
+  for (const key of usedFontKeys) {
+    const stdFont = FONT_MAP[key] || import_pdf_lib.StandardFonts.Helvetica;
+    fontCache.set(key, await pdfDoc.embedFont(stdFont));
+  }
   const pages = pdfDoc.getPages();
   function hexToRgb(hex) {
     const r = parseInt(hex.slice(1, 3), 16) / 255;
@@ -1234,15 +1372,35 @@ async function generateFilledPdf(pdfSource, fields) {
         });
       }
     } else {
-      const fontSize = Math.min(field.fontSize, h * 0.7);
-      page.drawText(field.value, {
-        x: x + 2,
-        y: y + h * 0.3,
-        size: fontSize,
-        font,
-        color: inkColor,
-        maxWidth: w - 4
-      });
+      const font = fontCache.get(field.fontFamily || "Helvetica");
+      const spacing = field.letterSpacing || 0;
+      const textWidthAtSize = (text, size) => {
+        const baseWidth = font.widthOfTextAtSize(text, size);
+        return baseWidth + spacing * (text.length - 1);
+      };
+      const maxFontSize = Math.min(field.fontSize, h * 0.7);
+      let fontSize = maxFontSize;
+      const padding = 4;
+      while (fontSize > 4) {
+        if (textWidthAtSize(field.value, fontSize) <= w - padding) break;
+        fontSize -= 0.5;
+      }
+      if (spacing > 0) {
+        let cx = x + 2;
+        const cy = y + h * 0.3;
+        for (const char of field.value) {
+          page.drawText(char, { x: cx, y: cy, size: fontSize, font, color: inkColor });
+          cx += font.widthOfTextAtSize(char, fontSize) + spacing;
+        }
+      } else {
+        page.drawText(field.value, {
+          x: x + 2,
+          y: y + h * 0.3,
+          size: fontSize,
+          font,
+          color: inkColor
+        });
+      }
     }
   }
   return pdfDoc.save();
@@ -1267,7 +1425,13 @@ async function postPdfToCallback(bytes, callbackUrl, filename) {
 }
 
 // src/components/pdf-builder/FieldNavigator.tsx
+var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+function isFieldFilled(f) {
+  if (!f.required) return true;
+  if (f.type === "checkbox") return true;
+  return !!f.value;
+}
 function FieldNavigator({
   fields,
   currentFieldId,
@@ -1276,6 +1440,7 @@ function FieldNavigator({
   onComplete,
   completeLabel = "Complete"
 }) {
+  const [showIncomplete, setShowIncomplete] = (0, import_react5.useState)(false);
   const currentIndex = fields.findIndex((f) => f.id === currentFieldId);
   const hasPrev = currentIndex > 0;
   const hasNext = currentIndex < fields.length - 1;
@@ -1289,19 +1454,36 @@ function FieldNavigator({
       onNavigate(fields[currentIndex + 1].id);
     }
   };
-  const filledCount = fields.filter((f) => {
-    if (!f.required) return true;
-    if (f.type === "checkbox") return true;
-    return !!f.value;
-  }).length;
+  const filledCount = fields.filter(isFieldFilled).length;
+  const incompleteFields = fields.filter((f) => !isFieldFilled(f));
   const showCompleteAsNext = !hasNext && allRequiredFilled;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "field-navigator", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "field-navigator-progress", children: [
-      filledCount,
-      " of ",
-      fields.length,
-      " fields completed"
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        className: `field-navigator-progress ${incompleteFields.length > 0 ? "clickable" : ""}`,
+        onClick: () => incompleteFields.length > 0 && setShowIncomplete(!showIncomplete),
+        children: [
+          filledCount,
+          " of ",
+          fields.length,
+          " fields completed",
+          incompleteFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "field-navigator-toggle", children: showIncomplete ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    showIncomplete && incompleteFields.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "incomplete-fields-list", children: incompleteFields.map((f) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        className: "incomplete-field-item",
+        onClick: () => {
+          onNavigate(f.id);
+          setShowIncomplete(false);
+        },
+        children: f.label
+      },
+      f.id
+    )) }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "field-navigator-controls", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "button",
@@ -1333,6 +1515,95 @@ function FieldNavigator({
   ] });
 }
 
+// src/utils/formulaResolver.ts
+var BUILTIN_TRANSFORMS = {
+  // Date transforms (expects a parseable date string)
+  month: (v) => {
+    const d = new Date(v);
+    return isNaN(d.getTime()) ? "" : String(d.getMonth() + 1);
+  },
+  month2: (v) => {
+    const d = new Date(v);
+    return isNaN(d.getTime()) ? "" : String(d.getMonth() + 1).padStart(2, "0");
+  },
+  monthname: (v) => {
+    const d = new Date(v);
+    return isNaN(d.getTime()) ? "" : d.toLocaleString("en", { month: "long" });
+  },
+  monthshort: (v) => {
+    const d = new Date(v);
+    return isNaN(d.getTime()) ? "" : d.toLocaleString("en", { month: "short" });
+  },
+  day: (v) => {
+    const d = new Date(v);
+    return isNaN(d.getTime()) ? "" : String(d.getDate());
+  },
+  day2: (v) => {
+    const d = new Date(v);
+    return isNaN(d.getTime()) ? "" : String(d.getDate()).padStart(2, "0");
+  },
+  year: (v) => {
+    const d = new Date(v);
+    return isNaN(d.getTime()) ? "" : String(d.getFullYear());
+  },
+  year2: (v) => {
+    const d = new Date(v);
+    return isNaN(d.getTime()) ? "" : String(d.getFullYear()).slice(-2);
+  },
+  // String transforms
+  upper: (v) => v.toUpperCase(),
+  lower: (v) => v.toLowerCase(),
+  trim: (v) => v.trim(),
+  first: (v) => v.split(/\s+/)[0] || "",
+  last: (v) => {
+    const parts = v.split(/\s+/);
+    return parts[parts.length - 1] || "";
+  },
+  initials: (v) => v.split(/\s+/).map((w) => w[0] || "").join("").toUpperCase(),
+  // Numeric / substring
+  last4: (v) => v.slice(-4),
+  last2: (v) => v.slice(-2),
+  first4: (v) => v.slice(0, 4),
+  first2: (v) => v.slice(0, 2),
+  digits: (v) => v.replace(/\D/g, ""),
+  number: (v) => {
+    const n = parseFloat(v);
+    return isNaN(n) ? "" : String(n);
+  },
+  currency: (v) => {
+    const n = parseFloat(v.replace(/[^0-9.-]/g, ""));
+    return isNaN(n) ? "" : `$${n.toFixed(2)}`;
+  }
+};
+var FORMULA_RE = /\{\{(.+?)\}\}/g;
+var PIPE_RE = /^(.+?)\s*\|\s*(.+)$/;
+function resolveFormula(formula, fields, customTransforms) {
+  const transforms = { ...BUILTIN_TRANSFORMS, ...customTransforms };
+  return formula.replace(FORMULA_RE, (_match, expr) => {
+    const pipeMatch = expr.match(PIPE_RE);
+    const sourceLabel = (pipeMatch ? pipeMatch[1] : expr).trim();
+    const transformName = pipeMatch ? pipeMatch[2].trim() : null;
+    const sourceField = fields.find((f) => f.label.toLowerCase() === sourceLabel.toLowerCase()) || fields.find((f) => f.id === sourceLabel);
+    if (!sourceField) return "";
+    const rawValue = sourceField.value || "";
+    if (!transformName) return rawValue;
+    const fn = transforms[transformName];
+    if (!fn) return rawValue;
+    try {
+      return fn(rawValue);
+    } catch {
+      return rawValue;
+    }
+  });
+}
+function resolveAllFormulas(fields, customTransforms) {
+  return fields.map((f) => {
+    if (!f.formula) return f;
+    const computed = resolveFormula(f.formula, fields, customTransforms);
+    return computed !== f.value ? { ...f, value: computed } : f;
+  });
+}
+
 // src/components/pdf-builder/SignerView.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function SignerView({
@@ -1344,7 +1615,8 @@ function SignerView({
   onComplete,
   initialValues,
   submitLabel,
-  signerOrder: signerOrderProp
+  signerOrder: signerOrderProp,
+  transforms
 } = {}) {
   if (!isValidApiKey(apiKey)) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "signer-layout", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "empty-state", children: [
@@ -1356,28 +1628,43 @@ function SignerView({
       ] })
     ] }) });
   }
-  const [pages, setPages] = (0, import_react4.useState)([]);
-  const [fields, setFields] = (0, import_react4.useState)([]);
-  const [selectedFieldId, setSelectedFieldId] = (0, import_react4.useState)(null);
-  const [signerRoles, setSignerRoles] = (0, import_react4.useState)([]);
-  const [currentSignerIndex, setCurrentSignerIndex] = (0, import_react4.useState)(() => {
+  const [pages, setPages] = (0, import_react6.useState)([]);
+  const [fields, setFields] = (0, import_react6.useState)([]);
+  const [selectedFieldId, setSelectedFieldId] = (0, import_react6.useState)(null);
+  const [signerRoles, setSignerRoles] = (0, import_react6.useState)([]);
+  const [currentSignerIndex, setCurrentSignerIndex] = (0, import_react6.useState)(() => {
     if (initialSigner && signerOrderProp) {
       const idx = signerOrderProp.indexOf(initialSigner);
       return idx >= 0 ? idx : 0;
     }
     return 0;
   });
-  const initializedRef = (0, import_react4.useRef)(false);
-  const [loading, setLoading] = (0, import_react4.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react4.useState)(false);
-  const [pdfSource, setPdfSource] = (0, import_react4.useState)(null);
-  const [callbackUrl, setCallbackUrl] = (0, import_react4.useState)(initialCallbackUrl || "");
-  const containerRef = (0, import_react4.useRef)(null);
+  const initializedRef = (0, import_react6.useRef)(false);
+  const [loading, setLoading] = (0, import_react6.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react6.useState)(false);
+  const [pdfSource, setPdfSource] = (0, import_react6.useState)(null);
+  const [callbackUrl, setCallbackUrl] = (0, import_react6.useState)(initialCallbackUrl || "");
+  const containerRef = (0, import_react6.useRef)(null);
   const signerOrder = signerOrderProp || (signerRoles.length > 0 ? [...signerRoles.filter((r) => r !== "Sender"), ...signerRoles.filter((r) => r === "Sender")] : [initialSigner || "Signer 1"]);
   const signer = signerOrder[currentSignerIndex] || signerOrder[0] || "Signer 1";
   const isLastSigner = currentSignerIndex >= signerOrder.length - 1;
   const isMultiSigner = signerOrder.length > 1;
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
+    if (fields.length === 0 || !isMultiSigner) return;
+    const signerFields = fields.filter(
+      (f) => f.assignee === signer && f.type !== "blackout" && f.type !== "whiteout"
+    );
+    const allFilled = signerFields.length > 0 && signerFields.every((f) => {
+      if (!f.required) return true;
+      if (f.type === "checkbox") return true;
+      return !!f.value;
+    });
+    if (allFilled && !isLastSigner) {
+      setCurrentSignerIndex((prev) => prev + 1);
+      setSelectedFieldId(null);
+    }
+  }, [currentSignerIndex, fields, signer, isLastSigner, isMultiSigner]);
+  (0, import_react6.useEffect)(() => {
     if (initialTemplate) {
       let templateFields = initialTemplate.fields;
       if (initialTemplate.signerRoles) setSignerRoles(initialTemplate.signerRoles);
@@ -1447,7 +1734,7 @@ function SignerView({
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
   }, [initialTemplate, initialPdfUrl]);
-  const loadPdf = (0, import_react4.useCallback)(async (source) => {
+  const loadPdf = (0, import_react6.useCallback)(async (source) => {
     setLoading(true);
     try {
       const rendered = await renderPdfPages(source);
@@ -1459,21 +1746,21 @@ function SignerView({
       setLoading(false);
     }
   }, []);
-  const editableFields = fields.filter((f) => f.assignee === signer && f.type !== "blackout" && f.type !== "whiteout").sort((a, b) => {
+  const editableFields = fields.filter((f) => f.assignee === signer && f.type !== "blackout" && f.type !== "whiteout" && !f.formula).sort((a, b) => {
     if (a.page !== b.page) return a.page - b.page;
     const bandThreshold = 2;
     if (Math.abs(a.y - b.y) > bandThreshold) return a.y - b.y;
     return a.x - b.x;
   });
   const selectedField = fields.find((f) => f.id === selectedFieldId) || null;
-  const isFieldEditable = selectedField ? selectedField.assignee === signer && selectedField.type !== "blackout" && selectedField.type !== "whiteout" : false;
-  const handleFieldUpdate = (0, import_react4.useCallback)((id, value) => {
+  const isFieldEditable = selectedField ? selectedField.assignee === signer && selectedField.type !== "blackout" && selectedField.type !== "whiteout" && !selectedField.formula : false;
+  const handleFieldUpdate = (0, import_react6.useCallback)((id, value) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, value } : f));
   }, []);
-  const handleFieldPropertyUpdate = (0, import_react4.useCallback)((id, updates) => {
+  const handleFieldPropertyUpdate = (0, import_react6.useCallback)((id, updates) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, ...updates } : f));
   }, []);
-  const handleNavigate = (0, import_react4.useCallback)((fieldId) => {
+  const handleNavigate = (0, import_react6.useCallback)((fieldId) => {
     setSelectedFieldId(fieldId);
     const field = fields.find((f) => f.id === fieldId);
     if (field && containerRef.current) {
@@ -1488,7 +1775,7 @@ function SignerView({
     if (f.type === "checkbox") return true;
     return !!f.value;
   });
-  const handleAdvanceOrSubmit = (0, import_react4.useCallback)(async () => {
+  const handleAdvanceOrSubmit = (0, import_react6.useCallback)(async () => {
     if (!allRequiredFilled) return;
     if (!isLastSigner) {
       setCurrentSignerIndex((prev) => prev + 1);
@@ -1502,7 +1789,8 @@ function SignerView({
     if (!pdfSource) return;
     setSubmitting(true);
     try {
-      const pdfBytes = await generateFilledPdf(pdfSource, fields);
+      const finalFields = resolveAllFormulas(fields, transforms);
+      const pdfBytes = await generateFilledPdf(pdfSource, finalFields);
       const blob = new Blob([pdfBytes.slice().buffer], { type: "application/pdf" });
       if (callbackUrl) {
         await postPdfToCallback(pdfBytes, callbackUrl, "signed-document.pdf");
@@ -1520,10 +1808,13 @@ function SignerView({
       setSubmitting(false);
     }
   }, [pdfSource, fields, callbackUrl, allRequiredFilled, onComplete, isLastSigner]);
-  const renderFieldContent = (0, import_react4.useCallback)((field) => {
+  const renderFieldContent = (0, import_react6.useCallback)((field) => {
     if (field.type === "blackout" || field.type === "whiteout") {
       return null;
     }
+    if (field.formula) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "field-overlay-value formula", children: field.value || "..." });
+    }
     const editable = field.assignee === signer;
     if (!editable) {
       if (field.type === "signature" || field.type === "initials") {
@@ -1556,6 +1847,28 @@ function SignerView({
     if (field.type === "signed-date") {
       return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "field-overlay-value", children: field.value || (/* @__PURE__ */ new Date()).toLocaleDateString() });
     }
+    const fontStyle = {
+      fontSize: `${field.fontSize * 0.6}px`,
+      letterSpacing: field.letterSpacing ? `${field.letterSpacing * 0.6}px` : void 0,
+      fontFamily: field.fontFamily === "Courier" ? "monospace" : field.fontFamily === "TimesRoman" ? "serif" : void 0
+    };
+    if (field.options && field.options.length > 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "select",
+        {
+          className: "field-inline-input",
+          value: field.value,
+          onChange: (e) => handleFieldUpdate(field.id, e.target.value),
+          onFocus: () => setSelectedFieldId(field.id),
+          onClick: (e) => e.stopPropagation(),
+          style: fontStyle,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: field.placeholder || "Select..." }),
+            field.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "input",
       {
@@ -1563,14 +1876,15 @@ function SignerView({
         className: "field-inline-input",
         value: field.value,
         placeholder: field.placeholder,
+        maxLength: field.maxLength || void 0,
         onChange: (e) => handleFieldUpdate(field.id, e.target.value),
         onFocus: () => setSelectedFieldId(field.id),
         onClick: (e) => e.stopPropagation(),
-        style: { fontSize: `${field.fontSize * 0.6}px` }
+        style: fontStyle
       }
     );
   }, [signer, handleFieldUpdate, setSelectedFieldId]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const sigFields = fields.filter((f) => f.assignee === signer && f.type === "signature" && f.value);
     if (sigFields.length > 0) {
       const dateStr = (/* @__PURE__ */ new Date()).toLocaleDateString();
@@ -1582,6 +1896,13 @@ function SignerView({
       }));
     }
   }, [fields.filter((f) => f.type === "signature" && f.value).length]);
+  (0, import_react6.useEffect)(() => {
+    const hasFormulas = fields.some((f) => f.formula);
+    if (!hasFormulas) return;
+    const resolved = resolveAllFormulas(fields, transforms);
+    const changed = resolved.some((f, i) => f.value !== fields[i].value);
+    if (changed) setFields(resolved);
+  }, [fields, transforms]);
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "signer-layout", ref: containerRef, children: [
     loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "loading-indicator", children: "Loading document..." }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "signer-content", children: [
@@ -1624,13 +1945,25 @@ function SignerView({
               }
             ),
             selectedField.type === "text" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              selectedField.options && selectedField.options.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                "select",
+                {
+                  value: selectedField.value,
+                  onChange: (e) => handleFieldUpdate(selectedField.id, e.target.value),
+                  className: "signer-text-input",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: "", children: selectedField.placeholder || "Select..." }),
+                    selectedField.options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: opt, children: opt }, opt))
+                  ]
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
                 "input",
                 {
                   type: selectedField.textSubtype === "email" ? "email" : selectedField.textSubtype === "number" ? "number" : selectedField.textSubtype === "phone" ? "tel" : selectedField.textSubtype === "date" ? "date" : "text",
                   value: selectedField.value,
                   onChange: (e) => handleFieldUpdate(selectedField.id, e.target.value),
                   placeholder: selectedField.placeholder,
+                  maxLength: selectedField.maxLength || void 0,
                   className: "signer-text-input"
                 }
               ),
@@ -1692,7 +2025,7 @@ function SignerView({
 }
 
 // src/components/pdf-builder/SignerRoleSelector.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 function SignerRoleSelector({
   roles,
@@ -1701,8 +2034,8 @@ function SignerRoleSelector({
   onAddRole,
   onRemoveRole
 }) {
-  const [isAdding, setIsAdding] = (0, import_react5.useState)(false);
-  const [newRoleName, setNewRoleName] = (0, import_react5.useState)("");
+  const [isAdding, setIsAdding] = (0, import_react7.useState)(false);
+  const [newRoleName, setNewRoleName] = (0, import_react7.useState)("");
   const handleAdd = () => {
     if (newRoleName.trim()) {
       onAddRole(newRoleName.trim());
@@ -1767,9 +2100,11 @@ function SignerRoleSelector({
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  BUILTIN_TRANSFORMS,
   DEFAULT_SIGNER_ROLES,
   DesignerView,
   FIELD_DEFAULTS,
+  FONT_FAMILIES,
   FieldNavigator,
   FieldPropertyPanel,
   PdfViewer,
@@ -1780,9 +2115,12 @@ function SignerRoleSelector({
   createField,
   downloadPdf,
   generateFilledPdf,
+  generateId,
   getSignerColor,
   postPdfToCallback,
   renderPdfPages,
+  resolveAllFormulas,
+  resolveFormula,
   uniqueLabel
 });
 //# sourceMappingURL=index.js.map