@unlev/exeq 0.1.5 → 0.1.7

package/dist/index.mjs

@@ -95,7 +95,7 @@ function createField(type, assignee, page, x, y, existingFields) {
     type,
     label: uniqueLabel(baseLabel, existingLabels),
     placeholder: defaults.placeholder || "",
-    required: true,
+    required: type === "checkbox" || type === "blackout" || type === "whiteout" ? false : true,
     assignee,
     page,
     x,
@@ -311,7 +311,8 @@ function FieldOverlayItem({
         borderColor: isRedact ? field.type === "blackout" ? "#666" : "#bbb" : color,
         borderStyle: isRedact ? "dashed" : "solid",
         backgroundColor: isRedact ? field.type === "blackout" ? "#000000" : "#ffffff" : isSelected ? `${color}22` : `${color}11`,
-        cursor: mode === "designer" ? "move" : "default"
+        cursor: mode === "designer" ? "move" : "default",
+        pointerEvents: mode === "signer" && isRedact ? "none" : void 0
       },
       onClick: (e) => {
         e.stopPropagation();
@@ -416,7 +417,7 @@ function FieldPropertyPanel({ field, signerRoles, onUpdate, onDelete }) {
         }
       )
     ] }),
-    !isRedactField && /* @__PURE__ */ jsx2("div", { className: "panel-field", children: /* @__PURE__ */ jsxs2("label", { className: "panel-checkbox-label", children: [
+    !isRedactField && field.type !== "checkbox" && /* @__PURE__ */ jsx2("div", { className: "panel-field", children: /* @__PURE__ */ jsxs2("label", { className: "panel-checkbox-label", children: [
       /* @__PURE__ */ jsx2(
         "input",
         {
@@ -516,10 +517,20 @@ function SignatureCanvas({
     }
   }, [paths, currentPath, width, height]);
   const getPoint = useCallback2((e) => {
-    const rect = canvasRef.current.getBoundingClientRect();
+    const canvas = canvasRef.current;
+    const rect = canvas.getBoundingClientRect();
+    const style = getComputedStyle(canvas);
+    const borderL = parseFloat(style.borderLeftWidth) || 0;
+    const borderT = parseFloat(style.borderTopWidth) || 0;
+    const borderR = parseFloat(style.borderRightWidth) || 0;
+    const borderB = parseFloat(style.borderBottomWidth) || 0;
+    const contentW = rect.width - borderL - borderR;
+    const contentH = rect.height - borderT - borderB;
+    const scaleX = canvas.width / contentW;
+    const scaleY = canvas.height / contentH;
     return [
-      e.clientX - rect.left,
-      e.clientY - rect.top,
+      (e.clientX - rect.left - borderL) * scaleX,
+      (e.clientY - rect.top - borderT) * scaleY,
       e.pressure
     ];
   }, []);
@@ -628,8 +639,10 @@ function DesignerView({
   const [newRoleName, setNewRoleName] = useState2("");
   const [draggingFieldType, setDraggingFieldType] = useState2(null);
   const [panelWidth, setPanelWidth] = useState2(380);
+  const [clipboardField, setClipboardField] = useState2(null);
   const dragGhostRef = useRef3(null);
   const resizingRef = useRef3(false);
+  const lastStylesRef = useRef3({});
   useEffect2(() => {
     const pdfUrl = initialPdfUrl || initialTemplate?.pdfUrl;
     if (pdfUrl) {
@@ -677,15 +690,24 @@ function DesignerView({
   }, [loadPdf]);
   const handlePageClick = useCallback3((page, x, y) => {
     const field = createField(activeFieldType, activeRole, page, x, y, fields);
-    setFields((prev) => [...prev, field]);
-    setSelectedFieldId(field.id);
+    const sticky = lastStylesRef.current[activeFieldType];
+    const styledField = sticky ? { ...field, ...sticky } : field;
+    setFields((prev) => [...prev, styledField]);
+    setSelectedFieldId(styledField.id);
     setRightTab("properties");
   }, [activeFieldType, activeRole, fields]);
   const handleFieldMove = useCallback3((id, page, x, y) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, page, x, y } : f));
   }, []);
   const handleFieldResize = useCallback3((id, width, height) => {
-    setFields((prev) => prev.map((f) => f.id === id ? { ...f, width, height } : f));
+    setFields((prev) => {
+      const field = prev.find((f) => f.id === id);
+      if (field) {
+        const existing = lastStylesRef.current[field.type] || {};
+        lastStylesRef.current[field.type] = { ...existing, width, height, fontSize: field.fontSize };
+      }
+      return prev.map((f) => f.id === id ? { ...f, width, height } : f);
+    });
   }, []);
   const handleFieldUpdate = useCallback3((id, updates) => {
     setFields((prev) => {
@@ -693,7 +715,18 @@ function DesignerView({
         const otherLabels = prev.filter((f) => f.id !== id).map((f) => f.label);
         updates.label = uniqueLabel(updates.label, otherLabels);
       }
-      return prev.map((f) => f.id === id ? { ...f, ...updates } : f);
+      const updated = prev.map((f) => f.id === id ? { ...f, ...updates } : f);
+      const field = prev.find((f) => f.id === id);
+      if (field && (updates.fontSize !== void 0 || updates.width !== void 0 || updates.height !== void 0 || updates.inkColor !== void 0)) {
+        const merged = { ...field, ...updates };
+        lastStylesRef.current[field.type] = {
+          width: merged.width,
+          height: merged.height,
+          fontSize: merged.fontSize,
+          inkColor: merged.inkColor
+        };
+      }
+      return updated;
     });
   }, []);
   const handleFieldDelete = useCallback3((id) => {
@@ -759,8 +792,10 @@ function DesignerView({
   }, []);
   const handleDropOnPage = useCallback3((page, x, y, fieldType) => {
     const field = createField(fieldType, activeRole, page, x, y, fields);
-    setFields((prev) => [...prev, field]);
-    setSelectedFieldId(field.id);
+    const sticky = lastStylesRef.current[fieldType];
+    const styledField = sticky ? { ...field, ...sticky } : field;
+    setFields((prev) => [...prev, styledField]);
+    setSelectedFieldId(styledField.id);
     setRightTab("properties");
   }, [activeRole, fields]);
   useEffect2(() => {
@@ -778,6 +813,38 @@ function DesignerView({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [selectedFieldId, handleFieldDelete]);
+  useEffect2(() => {
+    const handleKeyDown = (e) => {
+      const tag = (document.activeElement?.tagName || "").toLowerCase();
+      if (tag === "input" || tag === "textarea" || tag === "select") return;
+      if (document.activeElement?.isContentEditable) return;
+      const isMod = e.metaKey || e.ctrlKey;
+      if (isMod && e.key === "c" && selectedFieldId) {
+        const field = fields.find((f) => f.id === selectedFieldId);
+        if (field) {
+          e.preventDefault();
+          setClipboardField(field);
+        }
+      }
+      if (isMod && e.key === "v" && clipboardField) {
+        e.preventDefault();
+        const existingLabels = fields.map((f) => f.label);
+        const newField = {
+          ...clipboardField,
+          id: generateId(),
+          label: uniqueLabel(clipboardField.label, existingLabels),
+          x: clipboardField.x + 2,
+          y: clipboardField.y + 2,
+          value: ""
+        };
+        setFields((prev) => [...prev, newField]);
+        setSelectedFieldId(newField.id);
+        setRightTab("properties");
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedFieldId, fields, clipboardField]);
   const handleResizeStart = useCallback3((e) => {
     e.preventDefault();
     resizingRef.current = true;
@@ -1149,7 +1216,8 @@ function FieldNavigator({
   currentFieldId,
   onNavigate,
   allRequiredFilled,
-  onSubmit
+  onSubmit,
+  submitLabel = "Complete"
 }) {
   const currentIndex = fields.findIndex((f) => f.id === currentFieldId);
   const hasPrev = currentIndex > 0;
@@ -1203,7 +1271,7 @@ function FieldNavigator({
         onClick: onSubmit,
         disabled: !allRequiredFilled,
         className: "submit-btn",
-        children: "Complete & Download"
+        children: submitLabel
       }
     )
   ] });
@@ -1218,7 +1286,8 @@ function SignerView({
   initialSigner,
   callbackUrl: initialCallbackUrl,
   onComplete,
-  initialValues
+  initialValues,
+  submitLabel
 } = {}) {
   if (!isValidApiKey(apiKey)) {
     return /* @__PURE__ */ jsx6("div", { className: "signer-layout", children: /* @__PURE__ */ jsxs6("div", { className: "empty-state", children: [
@@ -1234,11 +1303,18 @@ function SignerView({
   const [fields, setFields] = useState3([]);
   const [selectedFieldId, setSelectedFieldId] = useState3(null);
   const [signer, setSigner] = useState3(initialSigner || "Signer 1");
+  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 containerRef = useRef4(null);
+  useEffect3(() => {
+    if (initialSigner) {
+      setSigner(initialSigner);
+      setSelectedFieldId(null);
+    }
+  }, [initialSigner]);
   useEffect3(() => {
     if (initialTemplate) {
       let templateFields = initialTemplate.fields;
@@ -1252,7 +1328,15 @@ function SignerView({
           return value !== void 0 ? { ...f, value } : f;
         });
       }
-      setFields(templateFields);
+      if (initializedRef.current) {
+        setFields((prev) => {
+          const valueMap = new Map(prev.filter((f) => f.value).map((f) => [f.id, f.value]));
+          return templateFields.map((f) => valueMap.has(f.id) ? { ...f, value: valueMap.get(f.id) } : f);
+        });
+      } else {
+        setFields(templateFields);
+        initializedRef.current = true;
+      }
       if (initialPdfUrl) loadPdf(initialPdfUrl);
       return;
     }
@@ -1265,11 +1349,31 @@ function SignerView({
     if (cbUrl) setCallbackUrl(cbUrl);
     if (pdfUrl) loadPdf(pdfUrl);
     if (fieldsUrl) {
-      fetch(fieldsUrl).then((r) => r.json()).then((template) => setFields(template.fields)).catch((err) => console.error("Failed to load fields:", err));
+      fetch(fieldsUrl).then((r) => r.json()).then((template) => {
+        if (initializedRef.current) {
+          setFields((prev) => {
+            const valueMap = new Map(prev.filter((f) => f.value).map((f) => [f.id, f.value]));
+            return template.fields.map((f) => valueMap.has(f.id) ? { ...f, value: valueMap.get(f.id) } : f);
+          });
+        } else {
+          setFields(template.fields);
+          initializedRef.current = true;
+        }
+      }).catch((err) => console.error("Failed to load fields:", err));
     }
     const handleMessage = (e) => {
       if (e.data?.type === "load-signing") {
-        if (e.data.fields) setFields(e.data.fields);
+        if (e.data.fields) {
+          if (initializedRef.current) {
+            setFields((prev) => {
+              const valueMap = new Map(prev.filter((f) => f.value).map((f) => [f.id, f.value]));
+              return e.data.fields.map((f) => valueMap.has(f.id) ? { ...f, value: valueMap.get(f.id) } : f);
+            });
+          } else {
+            setFields(e.data.fields);
+            initializedRef.current = true;
+          }
+        }
         if (e.data.pdfUrl) loadPdf(e.data.pdfUrl);
         if (e.data.signer) setSigner(e.data.signer);
         if (e.data.callbackUrl) setCallbackUrl(e.data.callbackUrl);
@@ -1290,14 +1394,14 @@ function SignerView({
       setLoading(false);
     }
   }, []);
-  const editableFields = fields.filter((f) => f.assignee === signer).sort((a, b) => {
+  const editableFields = fields.filter((f) => f.assignee === signer && f.type !== "blackout" && f.type !== "whiteout").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 : false;
+  const isFieldEditable = selectedField ? selectedField.assignee === signer && selectedField.type !== "blackout" && selectedField.type !== "whiteout" : false;
   const handleFieldUpdate = useCallback4((id, value) => {
     setFields((prev) => prev.map((f) => f.id === id ? { ...f, value } : f));
   }, []);
@@ -1339,6 +1443,9 @@ function SignerView({
     }
   }, [pdfSource, fields, callbackUrl, allRequiredFilled, onComplete]);
   const renderFieldContent = useCallback4((field) => {
+    if (field.type === "blackout" || field.type === "whiteout") {
+      return null;
+    }
     const editable = field.assignee === signer;
     if (!editable) {
       if (field.type === "signature" || field.type === "initials") {
@@ -1460,7 +1567,8 @@ function SignerView({
             currentFieldId: selectedFieldId,
             onNavigate: handleNavigate,
             allRequiredFilled,
-            onSubmit: handleSubmit
+            onSubmit: handleSubmit,
+            submitLabel
           }
         ),
         submitting && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Generating PDF..." })