@unlev/exeq 0.1.9 → 0.1.11

package/dist/index.mjs

@@ -1221,8 +1221,8 @@ function FieldNavigator({
   currentFieldId,
   onNavigate,
   allRequiredFilled,
-  onSubmit,
-  submitLabel = "Complete"
+  onComplete,
+  completeLabel = "Complete"
 }) {
   const currentIndex = fields.findIndex((f) => f.id === currentFieldId);
   const hasPrev = currentIndex > 0;
@@ -1242,6 +1242,7 @@ function FieldNavigator({
     if (f.type === "checkbox") return true;
     return !!f.value;
   }).length;
+  const showCompleteAsNext = !hasNext && allRequiredFilled;
   return /* @__PURE__ */ jsxs5("div", { className: "field-navigator", children: [
     /* @__PURE__ */ jsxs5("div", { className: "field-navigator-progress", children: [
       filledCount,
@@ -1260,7 +1261,14 @@ function FieldNavigator({
         }
       ),
       /* @__PURE__ */ jsx5("span", { className: "field-navigator-position", children: currentIndex >= 0 ? `${currentIndex + 1} / ${fields.length}` : "-" }),
-      /* @__PURE__ */ jsx5(
+      showCompleteAsNext ? /* @__PURE__ */ jsx5(
+        "button",
+        {
+          onClick: onComplete,
+          className: "nav-btn nav-btn-complete",
+          children: completeLabel
+        }
+      ) : /* @__PURE__ */ jsx5(
         "button",
         {
           onClick: handleNext,
@@ -1269,21 +1277,12 @@ function FieldNavigator({
           children: "Next"
         }
       )
-    ] }),
-    /* @__PURE__ */ jsx5(
-      "button",
-      {
-        onClick: onSubmit,
-        disabled: !allRequiredFilled,
-        className: "submit-btn",
-        children: submitLabel
-      }
-    )
+    ] })
   ] });
 }
 
 // src/components/pdf-builder/SignerView.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function SignerView({
   apiKey,
   initialPdfUrl,
@@ -1419,6 +1418,9 @@ function SignerView({
   const handleFieldUpdate = useCallback4((id, value) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, value } : f));
   }, []);
+  const handleFieldPropertyUpdate = useCallback4((id, updates) => {
+    setFields((prev) => prev.map((f) => f.id === id ? { ...f, ...updates } : f));
+  }, []);
   const handleNavigate = useCallback4((fieldId) => {
     setSelectedFieldId(fieldId);
     const field = fields.find((f) => f.id === fieldId);
@@ -1528,20 +1530,8 @@ function SignerView({
       }));
     }
   }, [fields.filter((f) => f.type === "signature" && f.value).length]);
-  const stepLabel = isLastSigner ? submitLabel || "Complete" : `Next: ${signerOrder[currentSignerIndex + 1]}`;
   return /* @__PURE__ */ jsxs6("div", { className: "signer-layout", ref: containerRef, children: [
     loading && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Loading document..." }),
-    isMultiSigner && /* @__PURE__ */ jsx6("div", { className: "signer-progress-bar", children: signerOrder.map((role, i) => /* @__PURE__ */ jsxs6(
-      "div",
-      {
-        className: `signer-progress-step ${i < currentSignerIndex ? "completed" : ""} ${i === currentSignerIndex ? "active" : ""} ${i > currentSignerIndex ? "upcoming" : ""}`,
-        children: [
-          /* @__PURE__ */ jsx6("div", { className: "signer-progress-dot", children: i < currentSignerIndex ? "\u2713" : i + 1 }),
-          /* @__PURE__ */ jsx6("span", { className: "signer-progress-label", children: role })
-        ]
-      },
-      role
-    )) }),
     /* @__PURE__ */ jsxs6("div", { className: "signer-content", children: [
       /* @__PURE__ */ jsx6("div", { className: "signer-pdf-area", children: pages.length > 0 && /* @__PURE__ */ jsx6(
         PdfViewer,
@@ -1556,65 +1546,93 @@ function SignerView({
         }
       ) }),
       /* @__PURE__ */ jsxs6("div", { className: "signer-panel", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "signer-role-indicator", children: [
-          /* @__PURE__ */ jsx6("span", { className: "signer-role-indicator-label", children: "Signing as" }),
-          /* @__PURE__ */ jsx6("strong", { children: signer })
+        /* @__PURE__ */ jsxs6("div", { className: "signer-panel-header", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "signer-role-indicator", children: [
+            /* @__PURE__ */ jsx6("span", { className: "signer-role-indicator-label", children: "Signing as" }),
+            /* @__PURE__ */ jsx6("strong", { children: signer })
+          ] }),
+          isMultiSigner && /* @__PURE__ */ jsxs6("div", { className: "signer-step-badge", children: [
+            "Step ",
+            currentSignerIndex + 1,
+            " of ",
+            signerOrder.length
+          ] })
         ] }),
-        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(
-            SignatureCanvas,
-            {
-              width: 280,
-              height: selectedField.type === "initials" ? 80 : 120,
-              onSign: (dataUrl) => handleFieldUpdate(selectedField.id, dataUrl),
-              initialValue: selectedField.value
-            }
-          ),
-          selectedField.type === "text" && /* @__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,
-              className: "signer-text-input"
-            }
-          ),
-          selectedField.type === "checkbox" && /* @__PURE__ */ jsxs6("label", { className: "signer-checkbox-label", children: [
-            /* @__PURE__ */ jsx6(
-              "input",
+        /* @__PURE__ */ jsxs6("div", { className: "signer-panel-body", children: [
+          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(
+              SignatureCanvas,
               {
-                type: "checkbox",
-                checked: selectedField.value === "true",
-                onChange: (e) => handleFieldUpdate(selectedField.id, e.target.checked ? "true" : "")
+                width: 280,
+                height: selectedField.type === "initials" ? 80 : 120,
+                onSign: (dataUrl) => handleFieldUpdate(selectedField.id, dataUrl),
+                initialValue: selectedField.value
               }
             ),
-            selectedField.placeholder || "Check this box"
+            selectedField.type === "text" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+              /* @__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,
+                  className: "signer-text-input"
+                }
+              ),
+              /* @__PURE__ */ jsxs6("div", { className: "signer-font-size", children: [
+                /* @__PURE__ */ jsx6("label", { children: "Font Size" }),
+                /* @__PURE__ */ jsx6(
+                  "input",
+                  {
+                    type: "number",
+                    min: "6",
+                    max: "72",
+                    value: selectedField.fontSize,
+                    onChange: (e) => handleFieldPropertyUpdate(selectedField.id, { fontSize: Number(e.target.value) })
+                  }
+                ),
+                /* @__PURE__ */ jsx6("span", { children: "pt" })
+              ] })
+            ] }),
+            selectedField.type === "checkbox" && /* @__PURE__ */ jsxs6("label", { className: "signer-checkbox-label", children: [
+              /* @__PURE__ */ jsx6(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: selectedField.value === "true",
+                  onChange: (e) => handleFieldUpdate(selectedField.id, e.target.checked ? "true" : "")
+                }
+              ),
+              selectedField.placeholder || "Check this box"
+            ] }),
+            selectedField.type === "signed-date" && /* @__PURE__ */ jsx6("div", { className: "signer-date-display", children: selectedField.value || "Will auto-fill when you sign" })
           ] }),
-          selectedField.type === "signed-date" && /* @__PURE__ */ jsx6("div", { className: "signer-date-display", children: selectedField.value || "Will auto-fill when you sign" })
-        ] }),
-        selectedField && !isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-readonly", children: [
-          /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
-          /* @__PURE__ */ jsx6("p", { children: "This field belongs to another signer." })
+          selectedField && !isFieldEditable && /* @__PURE__ */ jsxs6("div", { className: "signer-field-readonly", children: [
+            /* @__PURE__ */ jsx6("h3", { children: selectedField.label }),
+            /* @__PURE__ */ jsx6("p", { children: "This field belongs to another signer." })
+          ] }),
+          !selectedField && editableFields.length > 0 && /* @__PURE__ */ jsx6("div", { className: "panel-empty", children: "Select a field to fill it in, or use the navigation below." })
         ] }),
-        !selectedField && editableFields.length > 0 && /* @__PURE__ */ jsx6("div", { className: "panel-empty", children: "Select a field to fill it in, or use the navigation below." }),
-        /* @__PURE__ */ jsx6(
-          FieldNavigator,
-          {
-            fields: editableFields,
-            currentFieldId: selectedFieldId,
-            onNavigate: handleNavigate,
-            allRequiredFilled,
-            onSubmit: handleAdvanceOrSubmit,
-            submitLabel: stepLabel
-          }
-        ),
-        submitting && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Generating PDF..." }),
-        /* @__PURE__ */ jsxs6("div", { className: "powered-by", children: [
-          "Powered by ",
-          /* @__PURE__ */ jsx6("a", { href: "https://exeq.org", target: "_blank", rel: "noopener noreferrer", children: "Exeq.org" })
+        /* @__PURE__ */ jsxs6("div", { className: "signer-panel-footer", children: [
+          /* @__PURE__ */ jsx6(
+            FieldNavigator,
+            {
+              fields: editableFields,
+              currentFieldId: selectedFieldId,
+              onNavigate: handleNavigate,
+              allRequiredFilled,
+              onComplete: handleAdvanceOrSubmit,
+              completeLabel: isLastSigner ? submitLabel || "Complete" : `Next: ${signerOrder[currentSignerIndex + 1]}`
+            }
+          ),
+          submitting && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Generating PDF..." }),
+          /* @__PURE__ */ jsxs6("div", { className: "powered-by", children: [
+            "Powered by ",
+            /* @__PURE__ */ jsx6("a", { href: "https://exeq.org", target: "_blank", rel: "noopener noreferrer", children: "Exeq.org" })
+          ] })
         ] })
       ] })
     ] })