@unlev/exeq 0.4.0 → 0.4.2

package/dist/index.mjs

@@ -25,6 +25,56 @@ var SIGNER_ROLE_COLORS = {
 function getSignerColor(role) {
   return SIGNER_ROLE_COLORS[role] || "#888888";
 }
+function isRedactField(f) {
+  return f.type === "blackout" || f.type === "whiteout";
+}
+function isSignatureField(f) {
+  return f.type === "signature" || f.type === "initials";
+}
+function isTextLikeField(f) {
+  return f.type === "text" || f.type === "dropdown" || f.type === "signed-date";
+}
+function getInputType(subtype) {
+  switch (subtype) {
+    case "email":
+      return "email";
+    case "number":
+      return "number";
+    case "phone":
+      return "tel";
+    case "date":
+      return "date";
+    default:
+      return "text";
+  }
+}
+var CSS_FONT_MAP = {
+  Courier: '"Courier New", Courier, monospace',
+  TimesRoman: '"Times New Roman", Times, serif',
+  Helvetica: "Helvetica, Arial, sans-serif"
+};
+function getCssFontFamily(fontFamily) {
+  return fontFamily ? CSS_FONT_MAP[fontFamily] : void 0;
+}
+function sortFieldsByPosition(fields) {
+  return [...fields].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;
+  });
+}
+function preserveFieldValues(oldFields, newFields) {
+  const valueMap = new Map(oldFields.filter((f) => f.value).map((f) => [f.id, f.value]));
+  return newFields.map((f) => valueMap.has(f.id) ? { ...f, value: valueMap.get(f.id) } : f);
+}
+function getFieldValues(fields) {
+  const values = {};
+  fields.forEach((f) => {
+    if (!isRedactField(f)) values[f.label] = f.value || "";
+  });
+  return values;
+}
 var FONT_FAMILIES = [
   { value: "Helvetica", label: "Helvetica" },
   { value: "Courier", label: "Courier New" },
@@ -380,7 +430,7 @@ function FieldOverlayItem({
   const dragPosRef = useRef({ x: field.x, y: field.y });
   const didDragRef = useRef(false);
   const resizeStartRef = useRef(null);
-  const isRedact = field.type === "blackout" || field.type === "whiteout";
+  const isRedact = isRedactField(field);
   const isEditable = mode === "designer" || mode === "signer" && field.assignee === currentSigner;
   const isInactiveSigner = mode === "signer" && !isRedact && field.assignee !== currentSigner;
   const isFilled = mode === "signer" && isEditable && !isRedact && (field.type === "checkbox" ? true : field.formula ? true : !!field.value);
@@ -521,9 +571,9 @@ var INK_COLORS = [
 ];
 function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete, prefillContent, pageSize }) {
   const color = getSignerColor(field.assignee);
-  const isRedactField = field.type === "blackout" || field.type === "whiteout";
-  const isTextField = field.type === "text" || field.type === "signed-date" || field.type === "dropdown";
-  const showInkColor = field.type === "text" || field.type === "dropdown" || field.type === "signature" || field.type === "initials" || field.type === "signed-date";
+  const isRedact = isRedactField(field);
+  const isText = isTextLikeField(field);
+  const showInkColor = isText || isSignatureField(field);
   const [newOption, setNewOption] = useState2("");
   return /* @__PURE__ */ jsxs2("div", { className: "field-property-panel", children: [
     /* @__PURE__ */ jsxs2("div", { className: "panel-header", children: [
@@ -555,7 +605,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete, prefillCon
         /* @__PURE__ */ jsx2("button", { onClick: () => onDelete(field.id), className: "panel-icon-btn panel-icon-btn-danger", title: "Delete", children: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", children: /* @__PURE__ */ jsx2("path", { d: "M5 1h4v1H5V1zM2 3v1h1v8.5A1.5 1.5 0 004.5 14h5a1.5 1.5 0 001.5-1.5V4h1V3H2zm2 1h6v8.5a.5.5 0 01-.5.5h-5a.5.5 0 01-.5-.5V4z" }) }) })
       ] })
     ] }),
-    !isRedactField && /* @__PURE__ */ jsxs2("div", { className: "panel-section", children: [
+    !isRedact && /* @__PURE__ */ jsxs2("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsx2("div", { className: "panel-section-heading", children: "Assigned To" }),
       /* @__PURE__ */ jsx2(
         "select",
@@ -570,7 +620,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete, prefillCon
     ] }),
     /* @__PURE__ */ jsxs2("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsx2("div", { className: "panel-section-heading", children: "Content" }),
-      !isRedactField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      !isRedact && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
         /* @__PURE__ */ jsx2("label", { children: "Field Type" }),
         /* @__PURE__ */ jsxs2("select", { value: field.type, onChange: (e) => onUpdate(field.id, { type: e.target.value }), children: [
           /* @__PURE__ */ jsx2("option", { value: "text", children: "Text" }),
@@ -591,15 +641,15 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete, prefillCon
           /* @__PURE__ */ jsx2("option", { value: "phone", children: "Phone" })
         ] })
       ] }),
-      !isRedactField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      !isRedact && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
         /* @__PURE__ */ jsx2("label", { children: "Placeholder" }),
         /* @__PURE__ */ jsx2("input", { type: "text", value: field.placeholder, onChange: (e) => onUpdate(field.id, { placeholder: e.target.value }) })
       ] }),
-      !isRedactField && field.type !== "checkbox" && /* @__PURE__ */ jsx2("div", { className: "panel-field", children: /* @__PURE__ */ jsxs2("label", { className: "panel-checkbox-label", children: [
+      !isRedact && field.type !== "checkbox" && /* @__PURE__ */ jsx2("div", { className: "panel-field", children: /* @__PURE__ */ jsxs2("label", { className: "panel-checkbox-label", children: [
         /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: field.required, onChange: (e) => onUpdate(field.id, { required: e.target.checked }) }),
         "Required"
       ] }) }),
-      isTextField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      isText && /* @__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: "Auto-computed. Signer cannot edit." })
@@ -614,7 +664,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete, prefillCon
           /* @__PURE__ */ jsx2("input", { type: "number", min: "0", max: "9999", value: field.maxLength || 0, onChange: (e) => onUpdate(field.id, { maxLength: Number(e.target.value) }) })
         ] })
       ] }),
-      isTextField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      isText && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
         /* @__PURE__ */ jsxs2("label", { className: "panel-checkbox-label", children: [
           /* @__PURE__ */ jsx2("input", { type: "checkbox", checked: field.autoShrink || false, onChange: (e) => onUpdate(field.id, { autoShrink: e.target.checked }) }),
           "Auto-shrink to fit"
@@ -651,17 +701,17 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete, prefillCon
       ] }),
       prefillContent
     ] }),
-    (isTextField || showInkColor) && /* @__PURE__ */ jsxs2("div", { className: "panel-section", children: [
+    (isText || showInkColor) && /* @__PURE__ */ jsxs2("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsx2("div", { className: "panel-section-heading", children: "Style" }),
-      isTextField && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
+      isText && /* @__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: [
+      isText && /* @__PURE__ */ jsxs2("div", { className: "panel-field", children: [
         /* @__PURE__ */ jsx2("label", { children: "Font Size (pt)" }),
         /* @__PURE__ */ jsx2("input", { type: "number", min: "6", max: "72", value: field.fontSize, onChange: (e) => onUpdate(field.id, { fontSize: Number(e.target.value) }) })
       ] }),
-      isTextField && /* @__PURE__ */ jsxs2("div", { className: "panel-field-row", children: [
+      isText && /* @__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) }) })
@@ -1138,6 +1188,7 @@ function DesignerView({
   initialPdfUrl,
   initialTemplate,
   onSave,
+  onChange,
   hideHeader,
   headerPortalRef
 } = {}) {
@@ -1172,6 +1223,20 @@ function DesignerView({
   const dragGhostRef = useRef4(null);
   const resizingRef = useRef4(false);
   const lastStylesRef = useRef4({});
+  const onChangeMountedRef = useRef4(false);
+  useEffect2(() => {
+    if (!onChange) return;
+    if (!onChangeMountedRef.current) {
+      onChangeMountedRef.current = true;
+      return;
+    }
+    const template = {
+      fields,
+      signerRoles,
+      pdfUrl: typeof pdfSource === "string" ? pdfSource : ""
+    };
+    onChange(template);
+  }, [fields, signerRoles, pdfSource, onChange]);
   useEffect2(() => {
     const pdfUrl = initialPdfUrl || initialTemplate?.pdfUrl;
     if (pdfUrl) {
@@ -1218,11 +1283,16 @@ function DesignerView({
     reader.readAsArrayBuffer(file);
   }, [loadPdf]);
   const handlePageClick = useCallback4((page, x, y) => {
+    const scrollEl = pdfAreaRef.current;
+    const scrollTop = scrollEl?.scrollTop ?? 0;
     const field = createField(activeFieldType, activeRole, page, x, y, fields);
     const sticky = lastStylesRef.current[activeFieldType];
     const styledField = sticky ? { ...field, ...sticky } : field;
     setFields((prev) => [...prev, styledField]);
     setSelectedFieldIds(/* @__PURE__ */ new Set([styledField.id]));
+    requestAnimationFrame(() => {
+      if (scrollEl) scrollEl.scrollTop = scrollTop;
+    });
     setRightTab("properties");
   }, [activeFieldType, activeRole, fields]);
   const handleFieldMove = useCallback4((id, page, x, y) => {
@@ -1597,24 +1667,19 @@ function DesignerView({
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
   }, [panelWidth]);
-  const sortedFields = [...fields].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 sortedFields = sortFieldsByPosition(fields);
   const selectedField = selectedFieldIds.size === 1 ? fields.find((f) => f.id === Array.from(selectedFieldIds)[0]) || null : null;
   const renderFieldContent = useCallback4((field) => {
-    if (field.type === "blackout" || field.type === "whiteout") {
+    if (isRedactField(field)) {
       return null;
     }
-    if (field.type === "signature" || field.type === "initials") {
+    if (isSignatureField(field)) {
       if (field.value) {
         return /* @__PURE__ */ jsx4("img", { src: field.value, alt: field.label, className: "field-signature-preview" });
       }
     }
     const inkColor = field.inkColor || "#000000";
-    const cssFontFamily = field.fontFamily === "Courier" ? '"Courier New", Courier, monospace' : field.fontFamily === "TimesRoman" ? '"Times New Roman", Times, serif' : field.fontFamily === "Helvetica" ? "Helvetica, Arial, sans-serif" : void 0;
+    const cssFontFamily = getCssFontFamily(field.fontFamily);
     return /* @__PURE__ */ jsx4(
       "div",
       {
@@ -1639,7 +1704,6 @@ function DesignerView({
   ] }) : null;
   return /* @__PURE__ */ jsxs4("div", { className: "designer-layout", children: [
     headerPortalRef?.current && headerButtons && createPortal(headerButtons, headerPortalRef.current),
-    !hideHeader && !headerPortalRef && /* @__PURE__ */ jsx4("div", { className: "designer-header", children: /* @__PURE__ */ jsx4("div", { className: "designer-header-right", children: headerButtons }) }),
     /* @__PURE__ */ jsxs4("div", { className: "designer-body", children: [
       pages.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "designer-palette", children: [
         /* @__PURE__ */ jsx4("div", { className: "palette-heading", children: "New Field Role" }),
@@ -1753,6 +1817,7 @@ function DesignerView({
       pages.length > 0 && /* @__PURE__ */ jsxs4(Fragment2, { children: [
         /* @__PURE__ */ jsx4("div", { className: "panel-resize-handle", onMouseDown: handleResizeStart }),
         /* @__PURE__ */ jsxs4("div", { className: "designer-panel", style: { width: panelWidth }, children: [
+          !hideHeader && !headerPortalRef && headerButtons && /* @__PURE__ */ jsx4("div", { className: "designer-panel-actions", children: headerButtons }),
           /* @__PURE__ */ jsxs4("div", { className: "designer-panel-header", children: [
             /* @__PURE__ */ jsxs4("div", { className: "signer-role-indicator", children: [
               /* @__PURE__ */ jsx4("span", { className: "signer-role-indicator-label", children: "Editing as" }),
@@ -1843,9 +1908,9 @@ function DesignerView({
                 onUpdate: handleFieldUpdate,
                 onDelete: handleFieldDelete,
                 pageSize: pages[selectedField.page] ? { width: pages[selectedField.page].pdfWidth, height: pages[selectedField.page].pdfHeight } : void 0,
-                prefillContent: selectedField.type !== "blackout" && selectedField.type !== "whiteout" ? /* @__PURE__ */ jsxs4("div", { className: "prefill-section", children: [
+                prefillContent: !isRedactField(selectedField) ? /* @__PURE__ */ jsxs4("div", { className: "prefill-section", children: [
                   /* @__PURE__ */ jsx4("label", { children: "Pre-fill Value" }),
-                  selectedField.type === "signature" || selectedField.type === "initials" ? /* @__PURE__ */ jsx4(
+                  isSignatureField(selectedField) ? /* @__PURE__ */ jsx4(
                     SignatureCanvas,
                     {
                       width: panelWidth - 40,
@@ -2129,7 +2194,7 @@ async function renderFieldsOnPages(pages, fields, getFont, getSignature) {
     const y = pageHeight - field.y / 100 * pageHeight - field.height / 100 * pageHeight;
     const w = field.width / 100 * pageWidth;
     const h = field.height / 100 * pageHeight;
-    if (field.type === "blackout" || field.type === "whiteout") {
+    if (isRedactField(field)) {
       page.drawRectangle({
         x,
         y,
@@ -2158,7 +2223,7 @@ async function renderFieldsOnPages(pages, fields, getFont, getSignature) {
           color: inkColor
         });
       }
-    } else if (field.type === "signature" || field.type === "initials") {
+    } else if (isSignatureField(field)) {
       if (field.value.startsWith("data:image/png")) {
         const img = await getSignature(field.value);
         page.drawImage(img, { x, y, width: w, height: h });
@@ -2456,7 +2521,7 @@ function SignerView({
   useEffect3(() => {
     if (fields.length === 0 || !isMultiSigner) return;
     const signerFields = fields.filter(
-      (f) => f.assignee === signer && f.type !== "blackout" && f.type !== "whiteout"
+      (f) => f.assignee === signer && !isRedactField(f)
     );
     const allFilled = signerFields.length > 0 && signerFields.every((f) => {
       if (!f.required) return true;
@@ -2550,14 +2615,9 @@ function SignerView({
       setLoading(false);
     }
   }, []);
-  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 editableFields = sortFieldsByPosition(fields.filter((f) => f.assignee === signer && !isRedactField(f) && !f.formula));
   const selectedField = fields.find((f) => f.id === selectedFieldId) || null;
-  const isFieldEditable = selectedField ? selectedField.assignee === signer && selectedField.type !== "blackout" && selectedField.type !== "whiteout" && !selectedField.formula : false;
+  const isFieldEditable = selectedField ? selectedField.assignee === signer && !isRedactField(selectedField) && !selectedField.formula : false;
   const handleFieldUpdate = useCallback5((id, value) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, value } : f));
   }, []);
@@ -2569,7 +2629,7 @@ function SignerView({
     if (!onChange) return;
     const values = {};
     fields.forEach((f) => {
-      if (f.type !== "blackout" && f.type !== "whiteout") values[f.label] = f.value || "";
+      if (!isRedactField(f)) values[f.label] = f.value || "";
     });
     onChange(values);
   }, [fieldValuesKey]);
@@ -2590,18 +2650,12 @@ function SignerView({
     if (f.minLength && f.value.length < f.minLength) return false;
     return true;
   });
-  const getFieldValues = useCallback5(() => {
-    const values = {};
-    fields.forEach((f) => {
-      if (f.type !== "blackout" && f.type !== "whiteout") values[f.label] = f.value || "";
-    });
-    return values;
-  }, [fields]);
+  const getValues = useCallback5(() => getFieldValues(fields), [fields]);
   const handleAdvanceOrSubmit = useCallback5(async () => {
     if (!allRequiredFilled) return;
     auditLogRef.current.push({ signer, completedAt: (/* @__PURE__ */ new Date()).toISOString() });
     if (onSignerComplete) {
-      onSignerComplete(signer, getFieldValues());
+      onSignerComplete(signer, getValues());
     }
     if (!isLastSigner) {
       setCurrentSignerIndex((prev) => prev + 1);
@@ -2640,7 +2694,7 @@ function SignerView({
       }
       const blob = new Blob([pdfBytes.slice().buffer], { type: "application/pdf" });
       if (onExport && exportFormat) {
-        const values = getFieldValues();
+        const values = getValues();
         if (exportFormat === "json") {
           onExport(JSON.stringify(values, null, 2), "json");
         } else {
@@ -2665,9 +2719,9 @@ ${row.join(",")}`, "csv");
     } finally {
       setSubmitting(false);
     }
-  }, [pdfSource, fields, callbackUrl, allRequiredFilled, onComplete, isLastSigner, signer, onSignerComplete, includeAuditTrail, exportFormat, onExport, getFieldValues, transforms]);
+  }, [pdfSource, fields, callbackUrl, allRequiredFilled, onComplete, isLastSigner, signer, onSignerComplete, includeAuditTrail, exportFormat, onExport, getValues, transforms]);
   const renderFieldContent = useCallback5((field) => {
-    if (field.type === "blackout" || field.type === "whiteout") {
+    if (isRedactField(field)) {
       return null;
     }
     if (field.formula) {
@@ -2675,7 +2729,7 @@ ${row.join(",")}`, "csv");
     }
     const editable = field.assignee === signer;
     if (!editable) {
-      if (field.type === "signature" || field.type === "initials") {
+      if (isSignatureField(field)) {
         return field.value ? /* @__PURE__ */ jsx6("img", { src: field.value, alt: field.label, className: "field-signature-preview" }) : /* @__PURE__ */ jsx6("div", { className: "field-overlay-placeholder readonly", children: field.placeholder });
       }
       if (field.type === "checkbox") {
@@ -2683,7 +2737,7 @@ ${row.join(",")}`, "csv");
       }
       return /* @__PURE__ */ jsx6("div", { className: "field-overlay-placeholder readonly", children: field.value || field.placeholder });
     }
-    if (field.type === "signature" || field.type === "initials") {
+    if (isSignatureField(field)) {
       if (field.value) {
         return /* @__PURE__ */ jsx6("div", { className: "field-signature-filled", onClick: () => handleFieldUpdate(field.id, ""), children: /* @__PURE__ */ jsx6("img", { src: field.value, alt: field.label, className: "field-signature-preview" }) });
       }
@@ -2709,7 +2763,7 @@ ${row.join(",")}`, "csv");
       fontSize: `${field.fontSize}pt`,
       letterSpacing: field.letterSpacing ? `${field.letterSpacing}pt` : void 0,
       lineHeight: field.lineHeight ? `${field.lineHeight}` : void 0,
-      fontFamily: field.fontFamily === "Courier" ? '"Courier New", Courier, monospace' : field.fontFamily === "TimesRoman" ? '"Times New Roman", Times, serif' : field.fontFamily === "Helvetica" ? "Helvetica, Arial, sans-serif" : void 0
+      fontFamily: getCssFontFamily(field.fontFamily)
     };
     if (field.type === "dropdown" || field.options && field.options.length > 0) {
       return /* @__PURE__ */ jsxs6(
@@ -2794,7 +2848,7 @@ ${row.join(",")}`, "csv");
           selectedField && isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-input", children: [
             /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
             selectedField.required && /* @__PURE__ */ jsx6("span", { className: "required-badge", children: "Required" }),
-            (selectedField.type === "signature" || selectedField.type === "initials") && /* @__PURE__ */ jsx6(
+            isSignatureField(selectedField) && /* @__PURE__ */ jsx6(
               SignatureCanvas,
               {
                 width: 280,
@@ -2980,11 +3034,19 @@ export {
   downloadPdf,
   generateFilledPdf,
   generateId,
+  getCssFontFamily,
+  getFieldValues,
+  getInputType,
   getSignerColor,
+  isRedactField,
+  isSignatureField,
+  isTextLikeField,
   postPdfToCallback,
+  preserveFieldValues,
   renderPdfPages,
   resolveAllFormulas,
   resolveFormula,
+  sortFieldsByPosition,
   uniqueLabel
 };
 //# sourceMappingURL=index.mjs.map