@unlev/exeq 0.1.4 → 0.1.6

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: [
@@ -1290,14 +1359,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));
   }, []);
@@ -1322,13 +1391,15 @@ function SignerView({
     try {
       const pdfBytes = await generateFilledPdf(pdfSource, fields);
       const blob = new Blob([pdfBytes.slice().buffer], { type: "application/pdf" });
-      downloadPdf(pdfBytes, "signed-document.pdf");
       if (callbackUrl) {
         await postPdfToCallback(pdfBytes, callbackUrl, "signed-document.pdf");
       }
       if (onComplete) {
         onComplete(blob);
       }
+      if (!callbackUrl && !onComplete) {
+        downloadPdf(pdfBytes, "signed-document.pdf");
+      }
       window.parent?.postMessage({ type: "signing-complete" }, "*");
     } catch (err) {
       console.error("Failed to generate PDF:", err);
@@ -1337,6 +1408,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") {
@@ -1377,11 +1451,12 @@ function SignerView({
         value: field.value,
         placeholder: field.placeholder,
         onChange: (e) => handleFieldUpdate(field.id, e.target.value),
+        onFocus: () => setSelectedFieldId(field.id),
         onClick: (e) => e.stopPropagation(),
         style: { fontSize: `${field.fontSize * 0.6}px` }
       }
     );
-  }, [signer, handleFieldUpdate]);
+  }, [signer, handleFieldUpdate, setSelectedFieldId]);
   useEffect3(() => {
     const sigFields = fields.filter((f) => f.assignee === signer && f.type === "signature" && f.value);
     if (sigFields.length > 0) {
@@ -1457,7 +1532,8 @@ function SignerView({
             currentFieldId: selectedFieldId,
             onNavigate: handleNavigate,
             allRequiredFilled,
-            onSubmit: handleSubmit
+            onSubmit: handleSubmit,
+            submitLabel
           }
         ),
         submitting && /* @__PURE__ */ jsx6("div", { className: "loading-indicator", children: "Generating PDF..." })