@drvillo/react-browser-e-signing 0.3.1 → 0.4.0

package/dist/index.js

@@ -1,9 +1,9 @@
 import { pdfjs, Document, Page } from 'react-pdf';
-import { useEffect, useRef, useMemo, useState, useCallback } from 'react';
+import { useEffect, useRef, useState, useMemo, useCallback } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import SignaturePadLibrary from 'signature_pad';
 import fontkit from '@pdf-lib/fontkit';
-import { PDFDocument, StandardFonts } from 'pdf-lib';
+import { PDFDocument, StandardFonts, rgb } from 'pdf-lib';
 
 // src/lib/config.ts
 var _config = {};
@@ -240,12 +240,82 @@ function getFieldPreviewText(field, preview) {
   if (field.type === "fullName") return preview.fullName;
   if (field.type === "title") return preview.title;
   if (field.type === "date") return preview.dateText;
+  if (field.type === "custom" && field.label) return preview.customFields?.[field.label] ?? "";
   return "";
 }
-function SignatureField({ field, onUpdateField, onRemoveField, preview, className }) {
+function SignatureField({
+  field,
+  onUpdateField,
+  onRemoveField,
+  preview,
+  onUpdateCustomValue,
+  onCustomFieldRenamed,
+  className
+}) {
   const rootRef = useRef(null);
   const dragStateRef = useRef(null);
   const resizeStateRef = useRef(null);
+  const labelInputRef = useRef(null);
+  const valueInputRef = useRef(null);
+  const nextLabelModeRef = useRef("idle");
+  const isCustom = field.type === "custom";
+  const [editMode, setEditMode] = useState(
+    isCustom && !field.label ? "label" : "idle"
+  );
+  const [labelDraft, setLabelDraft] = useState(field.label ?? "");
+  const [valueDraft, setValueDraft] = useState("");
+  useEffect(() => {
+    if (editMode !== "label") return;
+    const id = setTimeout(() => labelInputRef.current?.focus(), 0);
+    return () => clearTimeout(id);
+  }, [editMode]);
+  useEffect(() => {
+    if (editMode !== "value") return;
+    const id = setTimeout(() => valueInputRef.current?.focus(), 0);
+    return () => clearTimeout(id);
+  }, [editMode]);
+  useEffect(() => {
+    if (editMode === "idle") setLabelDraft(field.label ?? "");
+  }, [field.label, editMode]);
+  function handleLabelKeyDown(e) {
+    if (e.key === "Enter" || e.key === "Tab") {
+      e.preventDefault();
+      nextLabelModeRef.current = onUpdateCustomValue ? "value" : "idle";
+      labelInputRef.current?.blur();
+    }
+    if (e.key === "Escape") {
+      nextLabelModeRef.current = "idle";
+      setLabelDraft(field.label ?? "");
+      labelInputRef.current?.blur();
+    }
+  }
+  function handleLabelBlur() {
+    const trimmed = labelDraft.trim();
+    if (trimmed) {
+      onUpdateField(field.id, { label: trimmed });
+      if (field.label && trimmed !== field.label) {
+        onCustomFieldRenamed?.(field.label, trimmed);
+      }
+    } else {
+      setLabelDraft(field.label ?? "");
+    }
+    const next = nextLabelModeRef.current;
+    nextLabelModeRef.current = "idle";
+    if (next === "value") {
+      setValueDraft(preview.customFields?.[trimmed || field.label || ""] ?? "");
+    }
+    setEditMode(next);
+  }
+  function handleValueKeyDown(e) {
+    if (e.key === "Enter" || e.key === "Tab" || e.key === "Escape") {
+      e.preventDefault();
+      valueInputRef.current?.blur();
+    }
+  }
+  function handleValueBlur() {
+    if (field.label && onUpdateCustomValue) onUpdateCustomValue(field.label, valueDraft);
+    setEditMode("idle");
+  }
   function handleDragPointerDown(event) {
     event.stopPropagation();
     if (event.button !== 0) return;
@@ -299,13 +369,10 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
     const deltaHeightPercent = deltaY / parentElement.clientHeight * 100;
     const maxWidth = 100 - field.xPercent;
     const maxHeight = 100 - field.yPercent;
-    const widthPercent = clampPercent(
-      Math.min(maxWidth, Math.max(MIN_WIDTH_PERCENT, resizeStateRef.current.startWidthPercent + deltaWidthPercent))
-    );
-    const heightPercent = clampPercent(
-      Math.min(maxHeight, Math.max(MIN_HEIGHT_PERCENT, resizeStateRef.current.startHeightPercent + deltaHeightPercent))
-    );
-    onUpdateField(field.id, { widthPercent, heightPercent });
+    onUpdateField(field.id, {
+      widthPercent: clampPercent(Math.min(maxWidth, Math.max(MIN_WIDTH_PERCENT, resizeStateRef.current.startWidthPercent + deltaWidthPercent))),
+      heightPercent: clampPercent(Math.min(maxHeight, Math.max(MIN_HEIGHT_PERCENT, resizeStateRef.current.startHeightPercent + deltaHeightPercent)))
+    });
   }
   function handleResizePointerUp(event) {
     resizeStateRef.current = null;
@@ -313,14 +380,13 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
       event.currentTarget.releasePointerCapture(event.pointerId);
   }
   const previewText = getFieldPreviewText(field, preview);
-  const isLocked = field.locked === true;
+  const fieldLabel = isCustom && field.label ? field.label : field.type;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: rootRef,
       "data-slot": "signature-field",
       "data-field-type": field.type,
-      "data-locked": isLocked ? true : void 0,
       className: cn(className),
       style: {
         position: "absolute",
@@ -328,18 +394,11 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
         top: `${field.yPercent}%`,
         width: `${field.widthPercent}%`,
         height: `${field.heightPercent}%`,
-        userSelect: "none",
-        cursor: isLocked ? "default" : void 0,
-        ...isLocked && {
-          borderStyle: "dashed",
-          borderWidth: 1,
-          borderColor: "rgba(100, 116, 139, 0.55)",
-          boxSizing: "border-box"
-        }
+        userSelect: "none"
       },
-      onPointerDown: isLocked ? void 0 : handleDragPointerDown,
-      onPointerMove: isLocked ? void 0 : handleDragPointerMove,
-      onPointerUp: isLocked ? void 0 : handleDragPointerUp,
+      onPointerDown: handleDragPointerDown,
+      onPointerMove: handleDragPointerMove,
+      onPointerUp: handleDragPointerUp,
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -350,11 +409,37 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
               height: "100%",
               width: "100%",
               alignItems: "stretch",
-              justifyContent: "space-between"
+              justifyContent: "space-between",
+              boxSizing: "border-box",
+              overflow: "hidden"
             },
             children: [
               /* @__PURE__ */ jsxs("div", { "data-slot": "signature-field-preview", children: [
-                /* @__PURE__ */ jsx("div", { "data-slot": "signature-field-label", children: field.type }),
+                isCustom && editMode === "label" ? /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: labelInputRef,
+                    "data-slot": "signature-field-label-input",
+                    value: labelDraft,
+                    placeholder: "Field name\u2026",
+                    onChange: (e) => setLabelDraft(e.target.value),
+                    onBlur: handleLabelBlur,
+                    onKeyDown: handleLabelKeyDown,
+                    onPointerDown: (e) => e.stopPropagation()
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-slot": "signature-field-label",
+                    title: isCustom ? "Click to rename" : void 0,
+                    style: { cursor: isCustom ? "text" : void 0 },
+                    onClick: isCustom ? () => {
+                      setLabelDraft(field.label ?? "");
+                      setEditMode("label");
+                    } : void 0,
+                    children: fieldLabel
+                  }
+                ),
                 field.type === "signature" && preview.signatureDataUrl ? /* @__PURE__ */ jsx(
                   "img",
                   {
@@ -363,41 +448,32 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
                     alt: "signature preview",
                     draggable: false
                   }
-                ) : /* @__PURE__ */ jsx("div", { "data-slot": "signature-field-preview-text", children: previewText || "\u2014" })
+                ) : isCustom && editMode === "value" ? /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    ref: valueInputRef,
+                    "data-slot": "signature-field-value-input",
+                    value: valueDraft,
+                    placeholder: "Value\u2026",
+                    onChange: (e) => setValueDraft(e.target.value),
+                    onBlur: handleValueBlur,
+                    onKeyDown: handleValueKeyDown,
+                    onPointerDown: (e) => e.stopPropagation()
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-slot": "signature-field-preview-text",
+                    style: { cursor: isCustom && editMode === "idle" ? "text" : void 0 },
+                    onClick: isCustom && editMode === "idle" ? () => {
+                      setValueDraft(preview.customFields?.[field.label ?? ""] ?? "");
+                      setEditMode("value");
+                    } : void 0,
+                    children: previewText || "\u2014"
+                  }
+                )
               ] }),
-              isLocked ? /* @__PURE__ */ jsx(
-                "div",
-                {
-                  "data-slot": "signature-field-lock",
-                  "aria-label": "Locked field",
-                  style: {
-                    flexShrink: 0,
-                    display: "flex",
-                    alignItems: "flex-start",
-                    justifyContent: "center",
-                    padding: "2px",
-                    color: "rgba(71, 85, 105, 0.9)"
-                  },
-                  children: /* @__PURE__ */ jsxs(
-                    "svg",
-                    {
-                      width: "14",
-                      height: "14",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      "aria-hidden": true,
-                      children: [
-                        /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2", ry: "2" }),
-                        /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
-                      ]
-                    }
-                  )
-                }
-              ) : /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(
                 "button",
                 {
                   type: "button",
@@ -414,7 +490,7 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
             ]
           }
         ),
-        !isLocked ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           "div",
           {
             "data-slot": "signature-field-resize",
@@ -430,7 +506,7 @@ function SignatureField({ field, onUpdateField, onRemoveField, preview, classNam
             onPointerMove: handleResizePointerMove,
             onPointerUp: handleResizePointerUp
           }
-        ) : null
+        )
       ]
     }
   );
@@ -442,6 +518,8 @@ function FieldOverlay({
   onAddField,
   onUpdateField,
   onRemoveField,
+  onUpdateCustomValue,
+  onCustomFieldRenamed,
   preview,
   className
 }) {
@@ -480,6 +558,8 @@ function FieldOverlay({
           field,
           onUpdateField,
           onRemoveField,
+          onUpdateCustomValue,
+          onCustomFieldRenamed,
           preview
         },
         field.id
@@ -491,11 +571,12 @@ var FIELD_LABELS = {
   signature: "Signature",
   fullName: "Full Name",
   title: "Title",
-  date: "Date"
+  date: "Date",
+  custom: "Custom"
 };
-var FIELD_TYPES = ["signature", "fullName", "title", "date"];
-function FieldPalette({ selectedFieldType, onSelectFieldType, className }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "field-palette", className: cn(className), children: FIELD_TYPES.map((fieldType) => {
+var DEFAULT_FIELD_TYPES = ["signature", "fullName", "title", "date"];
+function FieldPalette({ selectedFieldType, onSelectFieldType, fieldTypes = DEFAULT_FIELD_TYPES, className }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "field-palette", className: cn(className), children: fieldTypes.map((fieldType) => {
     const isSelected = selectedFieldType === fieldType;
     return /* @__PURE__ */ jsx(
       "button",
@@ -704,6 +785,74 @@ function SigningComplete({
     ] })
   ] });
 }
+function CustomFieldInputs({ labels, values, onValuesChange, className }) {
+  if (labels.length === 0) return null;
+  function handleChange(label, value) {
+    onValuesChange({ ...values, [label]: value });
+  }
+  function toInputId(label) {
+    const normalized = label.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    return normalized ? `custom-field-${normalized}` : "custom-field";
+  }
+  const uniqueLabels = [...new Set(labels)];
+  return /* @__PURE__ */ jsx("div", { "data-slot": "custom-field-inputs", className: cn(className), children: uniqueLabels.map((label) => /* @__PURE__ */ jsxs("div", { "data-slot": "custom-field-inputs-field", children: [
+    /* @__PURE__ */ jsx("label", { "data-slot": "custom-field-inputs-label", htmlFor: toInputId(label), children: label }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        "data-slot": "custom-field-inputs-input",
+        id: toInputId(label),
+        type: "text",
+        value: values[label] ?? "",
+        onChange: (event) => handleChange(label, event.target.value)
+      }
+    )
+  ] }, label)) });
+}
+function CustomFieldsPanel({
+  fields,
+  values,
+  onValuesChange,
+  isPlacingField,
+  onTogglePlacing,
+  className
+}) {
+  const seen = /* @__PURE__ */ new Set();
+  const uniqueLabels = [];
+  for (const f of fields) {
+    if (f.type === "custom" && f.label && !seen.has(f.label)) {
+      seen.add(f.label);
+      uniqueLabels.push(f.label);
+    }
+  }
+  function handleChange(label, value) {
+    onValuesChange({ ...values, [label]: value });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "custom-fields-panel", className: cn(className), children: [
+    /* @__PURE__ */ jsx("h2", { "data-slot": "custom-fields-panel-heading", children: "Custom Fields" }),
+    uniqueLabels.map((label) => /* @__PURE__ */ jsxs("label", { "data-slot": "custom-fields-panel-label", children: [
+      label,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          "data-slot": "custom-fields-panel-input",
+          value: values[label] ?? "",
+          onChange: (e) => handleChange(label, e.target.value)
+        }
+      )
+    ] }, label)),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "custom-fields-panel-add-button",
+        "data-state": isPlacingField ? "placing" : "idle",
+        onClick: onTogglePlacing,
+        children: isPlacingField ? "Click on the PDF to place\u2026" : "+ New field"
+      }
+    )
+  ] });
+}
 function isArrayBuffer(value) {
   return value instanceof ArrayBuffer;
 }
@@ -879,7 +1028,7 @@ function useFieldPlacement(options = {}) {
   const defaultHeightPercent = options.defaultHeightPercent ?? 5;
   const [fields, setFields] = useState(options.initialFields ?? []);
   const addField = useCallback(
-    ({ pageIndex, type, xPercent, yPercent }) => {
+    ({ pageIndex, type, xPercent, yPercent, label }) => {
       const field = {
         id: buildFieldId(),
         pageIndex,
@@ -887,13 +1036,23 @@ function useFieldPlacement(options = {}) {
         xPercent: clampPercent2(xPercent),
         yPercent: clampPercent2(yPercent),
         widthPercent: clampPercent2(defaultWidthPercent),
-        heightPercent: clampPercent2(defaultHeightPercent)
+        heightPercent: clampPercent2(defaultHeightPercent),
+        ...label !== void 0 && { label }
       };
       setFields((previousFields) => [...previousFields, field]);
       return field;
     },
     [defaultHeightPercent, defaultWidthPercent]
   );
+  const appendFields = useCallback((nextFields) => {
+    if (!nextFields.length) return;
+    setFields((previousFields) => {
+      const existingIds = new Set(previousFields.map((field) => field.id));
+      const uniqueNextFields = nextFields.filter((field) => !existingIds.has(field.id));
+      if (!uniqueNextFields.length) return previousFields;
+      return [...previousFields, ...uniqueNextFields];
+    });
+  }, []);
   const updateField = useCallback((id, partial) => {
     setFields(
       (previousFields) => previousFields.map((field) => {
@@ -918,11 +1077,12 @@ function useFieldPlacement(options = {}) {
   const fieldActions = useMemo(
     () => ({
       addField,
+      appendFields,
       updateField,
       removeField,
       clearFields
     }),
-    [addField, clearFields, removeField, updateField]
+    [addField, appendFields, clearFields, removeField, updateField]
   );
   return {
     fields,
@@ -1108,6 +1268,27 @@ async function modifyPdf({
       });
       continue;
     }
+    if (field.type === "custom") {
+      const pad = 2;
+      page.drawRectangle({
+        x: pointRect.x - pad,
+        y: pointRect.y - pad,
+        width: pointRect.width + pad * 2,
+        height: pointRect.height + pad * 2,
+        color: rgb(1, 1, 1)
+      });
+      const customValue = field.label ? signer.customFields?.[field.label] ?? "" : "";
+      if (customValue) {
+        const textSize2 = Math.max(9, Math.min(16, pointRect.height * 0.6));
+        page.drawText(customValue, {
+          x: pointRect.x + 2,
+          y: pointRect.y + Math.max(0, (pointRect.height - textSize2) / 2),
+          size: textSize2,
+          font: helveticaFont
+        });
+      }
+      continue;
+    }
     const textValue = field.type === "fullName" ? fullNameFromSigner(signer) : field.type === "title" ? signer.title : field.type === "date" ? resolvedDateText : "";
     if (!textValue) continue;
     const textSize = Math.max(9, Math.min(16, pointRect.height * 0.6));
@@ -1155,7 +1336,13 @@ var SLOTS = {
   signatureFieldPreviewText: "signature-field-preview-text",
   signatureFieldRemove: "signature-field-remove",
   signatureFieldResize: "signature-field-resize",
-  signatureFieldLock: "signature-field-lock",
+  signatureFieldLabelInput: "signature-field-label-input",
+  signatureFieldValueInput: "signature-field-value-input",
+  customFieldsPanel: "custom-fields-panel",
+  customFieldsPanelHeading: "custom-fields-panel-heading",
+  customFieldsPanelLabel: "custom-fields-panel-label",
+  customFieldsPanelInput: "custom-fields-panel-input",
+  customFieldsPanelAddButton: "custom-fields-panel-add-button",
   fieldPalette: "field-palette",
   fieldPaletteButton: "field-palette-button",
   signerPanel: "signer-panel",
@@ -1193,6 +1380,6 @@ var defaults = {
   DEFAULT_FIELD_HEIGHT_PERCENT: 5
 };
 
-export { FieldOverlay, FieldPalette, PdfPageNavigator, PdfViewer, SIGNATURE_FONTS, SLOTS, SignatureField, SignaturePad, SignaturePreview, SignerDetailsPanel, SigningComplete, configure, defaults, loadSignatureFont, mapFromPoints, mapToPoints, modifyPdf, sha256, useFieldPlacement, usePdfDocument, usePdfPageVisibility, useSignatureRenderer };
+export { CustomFieldInputs, CustomFieldsPanel, FieldOverlay, FieldPalette, PdfPageNavigator, PdfViewer, SIGNATURE_FONTS, SLOTS, SignatureField, SignaturePad, SignaturePreview, SignerDetailsPanel, SigningComplete, configure, defaults, loadSignatureFont, mapFromPoints, mapToPoints, modifyPdf, sha256, useFieldPlacement, usePdfDocument, usePdfPageVisibility, useSignatureRenderer };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map