@unlev/exeq 0.1.11 → 0.2.0

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/pdf-builder/DesignerView.tsx
-import { useState as useState2, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useState as useState3, useCallback as useCallback3, useEffect as useEffect2, useRef as useRef3 } from "react";
 import { createPortal } from "react-dom";
 
 // src/types/pdf-builder.ts
@@ -25,6 +25,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,
@@ -336,6 +341,7 @@ function FieldOverlayItem({
 }
 
 // src/components/pdf-builder/FieldPropertyPanel.tsx
+import { useState } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var INK_COLORS = [
   { value: "#000000", label: "Black" },
@@ -344,8 +350,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] = useState("");
   return /* @__PURE__ */ jsxs2("div", { className: "field-property-panel", children: [
     /* @__PURE__ */ jsxs2("div", { className: "panel-header", children: [
       /* @__PURE__ */ jsx2("h3", { style: { color }, children: field.label }),
@@ -418,6 +425,19 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         }
       )
     ] }),
+    isTextField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      /* @__PURE__ */ jsx2("label", { children: "Formula" }),
+      /* @__PURE__ */ jsx2(
+        "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__ */ jsx2("span", { className: "panel-hint", children: "This field auto-computes from other fields. Signer cannot edit it." })
+    ] }),
     !isRedactField && field.type !== "checkbox" && /* @__PURE__ */ jsx2("div", { className: "panel-field", children: /* @__PURE__ */ jsxs2("label", { className: "panel-checkbox-label", children: [
       /* @__PURE__ */ jsx2(
         "input",
@@ -429,7 +449,18 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
       ),
       "Required"
     ] }) }),
-    showFontSize && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+    isTextField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      /* @__PURE__ */ jsx2("label", { children: "Font" }),
+      /* @__PURE__ */ jsx2(
+        "select",
+        {
+          value: field.fontFamily || "Helvetica",
+          onChange: (e) => onUpdate(field.id, { fontFamily: e.target.value }),
+          children: FONT_FAMILIES.map((f) => /* @__PURE__ */ jsx2("option", { value: f.value, children: f.label }, f.value))
+        }
+      )
+    ] }),
+    isTextField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
       /* @__PURE__ */ jsx2("label", { children: "Font Size (pt)" }),
       /* @__PURE__ */ jsx2(
         "input",
@@ -442,6 +473,49 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         }
       )
     ] }),
+    isTextField && /* @__PURE__ */ jsxs2("div", { className: "panel-field-row", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "panel-field panel-field-half", children: [
+        /* @__PURE__ */ jsx2("label", { children: "Letter Spacing" }),
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsxs2("div", { className: "panel-field panel-field-half", children: [
+        /* @__PURE__ */ jsx2("label", { children: "Line Height" }),
+        /* @__PURE__ */ jsx2(
+          "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__ */ jsxs2("div", { className: "panel-field", children: [
+      /* @__PURE__ */ jsx2("label", { children: "Max Characters (0 = unlimited)" }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          type: "number",
+          min: "0",
+          max: "9999",
+          value: field.maxLength || 0,
+          onChange: (e) => onUpdate(field.id, { maxLength: Number(e.target.value) })
+        }
+      )
+    ] }),
     showInkColor && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
       /* @__PURE__ */ jsx2("label", { children: "Ink Color" }),
       /* @__PURE__ */ jsx2("div", { className: "ink-color-picker", children: INK_COLORS.map((c) => /* @__PURE__ */ jsx2(
@@ -454,12 +528,61 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         },
         c.value
       )) })
+    ] }),
+    field.type === "text" && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      /* @__PURE__ */ jsx2("label", { children: "Predefined Options" }),
+      /* @__PURE__ */ jsxs2("div", { className: "panel-options-list", children: [
+        (field.options || []).map((opt, i) => /* @__PURE__ */ jsxs2("div", { className: "panel-option-item", children: [
+          /* @__PURE__ */ jsx2("span", { children: opt }),
+          /* @__PURE__ */ jsx2(
+            "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__ */ jsxs2("div", { className: "panel-option-add", children: [
+          /* @__PURE__ */ jsx2(
+            "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__ */ jsx2(
+            "button",
+            {
+              onClick: () => {
+                if (newOption.trim()) {
+                  onUpdate(field.id, { options: [...field.options || [], newOption.trim()] });
+                  setNewOption("");
+                }
+              },
+              children: "+"
+            }
+          )
+        ] })
+      ] }),
+      (field.options?.length ?? 0) > 0 && /* @__PURE__ */ jsx2("span", { className: "panel-hint", children: "Signer will choose from these options via dropdown" })
     ] })
   ] });
 }
 
 // src/components/pdf-builder/SignatureCanvas.tsx
-import { useRef as useRef2, useState, useCallback as useCallback2, useEffect } from "react";
+import { useRef as useRef2, useState as useState2, useCallback as useCallback2, useEffect } from "react";
 import { getStroke } from "perfect-freehand";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function getSvgPathFromStroke(stroke) {
@@ -484,9 +607,9 @@ function SignatureCanvas({
   inkColor = "#000000"
 }) {
   const canvasRef = useRef2(null);
-  const [paths, setPaths] = useState([]);
-  const [currentPath, setCurrentPath] = useState(null);
-  const [isEmpty, setIsEmpty] = useState(!initialValue);
+  const [paths, setPaths] = useState2([]);
+  const [currentPath, setCurrentPath] = useState2(null);
+  const [isEmpty, setIsEmpty] = useState2(!initialValue);
   useEffect(() => {
     if (initialValue && canvasRef.current) {
       const ctx = canvasRef.current.getContext("2d");
@@ -627,20 +750,20 @@ function DesignerView({
       ] })
     ] }) });
   }
-  const [pages, setPages] = useState2([]);
-  const [fields, setFields] = useState2(initialTemplate?.fields ?? []);
-  const [selectedFieldId, setSelectedFieldId] = useState2(null);
-  const [signerRoles, setSignerRoles] = useState2(initialTemplate?.signerRoles ?? [...DEFAULT_SIGNER_ROLES]);
-  const [activeRole, setActiveRole] = useState2("Sender");
-  const [activeFieldType, setActiveFieldType] = useState2("text");
-  const [loading, setLoading] = useState2(false);
-  const [pdfSource, setPdfSource] = useState2(null);
-  const [rightTab, setRightTab] = useState2("properties");
-  const [isAddingRole, setIsAddingRole] = useState2(false);
-  const [newRoleName, setNewRoleName] = useState2("");
-  const [draggingFieldType, setDraggingFieldType] = useState2(null);
-  const [panelWidth, setPanelWidth] = useState2(380);
-  const [clipboardField, setClipboardField] = useState2(null);
+  const [pages, setPages] = useState3([]);
+  const [fields, setFields] = useState3(initialTemplate?.fields ?? []);
+  const [selectedFieldId, setSelectedFieldId] = useState3(null);
+  const [signerRoles, setSignerRoles] = useState3(initialTemplate?.signerRoles ?? [...DEFAULT_SIGNER_ROLES]);
+  const [activeRole, setActiveRole] = useState3("Sender");
+  const [activeFieldType, setActiveFieldType] = useState3("text");
+  const [loading, setLoading] = useState3(false);
+  const [pdfSource, setPdfSource] = useState3(null);
+  const [rightTab, setRightTab] = useState3("properties");
+  const [isAddingRole, setIsAddingRole] = useState3(false);
+  const [newRoleName, setNewRoleName] = useState3("");
+  const [draggingFieldType, setDraggingFieldType] = useState3(null);
+  const [panelWidth, setPanelWidth] = useState3(380);
+  const [clipboardField, setClipboardField] = useState3(null);
   const dragGhostRef = useRef3(null);
   const resizingRef = useRef3(false);
   const lastStylesRef = useRef3({});
@@ -1108,10 +1231,15 @@ function DesignerView({
 }
 
 // src/components/pdf-builder/SignerView.tsx
-import { useState as useState3, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useState as useState5, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef4 } from "react";
 
 // src/utils/pdfFiller.ts
 import { PDFDocument, rgb, StandardFonts } from "pdf-lib";
+var FONT_MAP = {
+  "Helvetica": StandardFonts.Helvetica,
+  "Courier": StandardFonts.Courier,
+  "TimesRoman": StandardFonts.TimesRoman
+};
 async function generateFilledPdf(pdfSource, fields) {
   let pdfBytes;
   if (typeof pdfSource === "string") {
@@ -1121,7 +1249,12 @@ async function generateFilledPdf(pdfSource, fields) {
     pdfBytes = pdfSource;
   }
   const pdfDoc = await PDFDocument.load(pdfBytes);
-  const font = await pdfDoc.embedFont(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] || 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;
@@ -1182,15 +1315,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();
@@ -1215,7 +1368,13 @@ async function postPdfToCallback(bytes, callbackUrl, filename) {
 }
 
 // src/components/pdf-builder/FieldNavigator.tsx
+import { useState as useState4 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+function isFieldFilled(f) {
+  if (!f.required) return true;
+  if (f.type === "checkbox") return true;
+  return !!f.value;
+}
 function FieldNavigator({
   fields,
   currentFieldId,
@@ -1224,6 +1383,7 @@ function FieldNavigator({
   onComplete,
   completeLabel = "Complete"
 }) {
+  const [showIncomplete, setShowIncomplete] = useState4(false);
   const currentIndex = fields.findIndex((f) => f.id === currentFieldId);
   const hasPrev = currentIndex > 0;
   const hasNext = currentIndex < fields.length - 1;
@@ -1237,19 +1397,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__ */ jsxs5("div", { className: "field-navigator", children: [
-    /* @__PURE__ */ jsxs5("div", { className: "field-navigator-progress", children: [
-      filledCount,
-      " of ",
-      fields.length,
-      " fields completed"
-    ] }),
+    /* @__PURE__ */ jsxs5(
+      "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__ */ jsx5("span", { className: "field-navigator-toggle", children: showIncomplete ? "\u25B2" : "\u25BC" })
+        ]
+      }
+    ),
+    showIncomplete && incompleteFields.length > 0 && /* @__PURE__ */ jsx5("div", { className: "incomplete-fields-list", children: incompleteFields.map((f) => /* @__PURE__ */ jsx5(
+      "button",
+      {
+        className: "incomplete-field-item",
+        onClick: () => {
+          onNavigate(f.id);
+          setShowIncomplete(false);
+        },
+        children: f.label
+      },
+      f.id
+    )) }),
     /* @__PURE__ */ jsxs5("div", { className: "field-navigator-controls", children: [
       /* @__PURE__ */ jsx5(
         "button",
@@ -1281,6 +1458,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
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function SignerView({
@@ -1292,7 +1558,8 @@ function SignerView({
   onComplete,
   initialValues,
   submitLabel,
-  signerOrder: signerOrderProp
+  signerOrder: signerOrderProp,
+  transforms
 } = {}) {
   if (!isValidApiKey(apiKey)) {
     return /* @__PURE__ */ jsx6("div", { className: "signer-layout", children: /* @__PURE__ */ jsxs6("div", { className: "empty-state", children: [
@@ -1304,11 +1571,11 @@ function SignerView({
       ] })
     ] }) });
   }
-  const [pages, setPages] = useState3([]);
-  const [fields, setFields] = useState3([]);
-  const [selectedFieldId, setSelectedFieldId] = useState3(null);
-  const [signerRoles, setSignerRoles] = useState3([]);
-  const [currentSignerIndex, setCurrentSignerIndex] = useState3(() => {
+  const [pages, setPages] = useState5([]);
+  const [fields, setFields] = useState5([]);
+  const [selectedFieldId, setSelectedFieldId] = useState5(null);
+  const [signerRoles, setSignerRoles] = useState5([]);
+  const [currentSignerIndex, setCurrentSignerIndex] = useState5(() => {
     if (initialSigner && signerOrderProp) {
       const idx = signerOrderProp.indexOf(initialSigner);
       return idx >= 0 ? idx : 0;
@@ -1316,15 +1583,30 @@ function SignerView({
     return 0;
   });
   const initializedRef = useRef4(false);
-  const [loading, setLoading] = useState3(false);
-  const [submitting, setSubmitting] = useState3(false);
-  const [pdfSource, setPdfSource] = useState3(null);
-  const [callbackUrl, setCallbackUrl] = useState3(initialCallbackUrl || "");
+  const [loading, setLoading] = useState5(false);
+  const [submitting, setSubmitting] = useState5(false);
+  const [pdfSource, setPdfSource] = useState5(null);
+  const [callbackUrl, setCallbackUrl] = useState5(initialCallbackUrl || "");
   const containerRef = useRef4(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;
+  useEffect3(() => {
+    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]);
   useEffect3(() => {
     if (initialTemplate) {
       let templateFields = initialTemplate.fields;
@@ -1407,14 +1689,14 @@ 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 isFieldEditable = selectedField ? selectedField.assignee === signer && selectedField.type !== "blackout" && selectedField.type !== "whiteout" && !selectedField.formula : false;
   const handleFieldUpdate = useCallback4((id, value) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, value } : f));
   }, []);
@@ -1450,7 +1732,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");
@@ -1472,6 +1755,9 @@ function SignerView({
     if (field.type === "blackout" || field.type === "whiteout") {
       return null;
     }
+    if (field.formula) {
+      return /* @__PURE__ */ jsx6("div", { className: "field-overlay-value formula", children: field.value || "..." });
+    }
     const editable = field.assignee === signer;
     if (!editable) {
       if (field.type === "signature" || field.type === "initials") {
@@ -1504,6 +1790,28 @@ function SignerView({
     if (field.type === "signed-date") {
       return /* @__PURE__ */ jsx6("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__ */ jsxs6(
+        "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__ */ jsx6("option", { value: "", children: field.placeholder || "Select..." }),
+            field.options.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ jsx6(
       "input",
       {
@@ -1511,10 +1819,11 @@ 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]);
@@ -1530,6 +1839,13 @@ function SignerView({
       }));
     }
   }, [fields.filter((f) => f.type === "signature" && f.value).length]);
+  useEffect3(() => {
+    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__ */ jsxs6("div", { className: "signer-layout", ref: containerRef, children: [
     loading && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Loading document..." }),
     /* @__PURE__ */ jsxs6("div", { className: "signer-content", children: [
@@ -1572,13 +1888,25 @@ function SignerView({
               }
             ),
             selectedField.type === "text" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
-              /* @__PURE__ */ jsx6(
+              selectedField.options && selectedField.options.length > 0 ? /* @__PURE__ */ jsxs6(
+                "select",
+                {
+                  value: selectedField.value,
+                  onChange: (e) => handleFieldUpdate(selectedField.id, e.target.value),
+                  className: "signer-text-input",
+                  children: [
+                    /* @__PURE__ */ jsx6("option", { value: "", children: selectedField.placeholder || "Select..." }),
+                    selectedField.options.map((opt) => /* @__PURE__ */ jsx6("option", { value: opt, children: opt }, opt))
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx6(
                 "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"
                 }
               ),
@@ -1640,7 +1968,7 @@ function SignerView({
 }
 
 // src/components/pdf-builder/SignerRoleSelector.tsx
-import { useState as useState4 } from "react";
+import { useState as useState6 } from "react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function SignerRoleSelector({
   roles,
@@ -1649,8 +1977,8 @@ function SignerRoleSelector({
   onAddRole,
   onRemoveRole
 }) {
-  const [isAdding, setIsAdding] = useState4(false);
-  const [newRoleName, setNewRoleName] = useState4("");
+  const [isAdding, setIsAdding] = useState6(false);
+  const [newRoleName, setNewRoleName] = useState6("");
   const handleAdd = () => {
     if (newRoleName.trim()) {
       onAddRole(newRoleName.trim());
@@ -1714,9 +2042,11 @@ function SignerRoleSelector({
   ] });
 }
 export {
+  BUILTIN_TRANSFORMS,
   DEFAULT_SIGNER_ROLES,
   DesignerView,
   FIELD_DEFAULTS,
+  FONT_FAMILIES,
   FieldNavigator,
   FieldPropertyPanel,
   PdfViewer,
@@ -1727,9 +2057,12 @@ export {
   createField,
   downloadPdf,
   generateFilledPdf,
+  generateId,
   getSignerColor,
   postPdfToCallback,
   renderPdfPages,
+  resolveAllFormulas,
+  resolveFormula,
   uniqueLabel
 };
 //# sourceMappingURL=index.mjs.map