formanitor 0.0.5 → 0.0.6

package/dist/index.cjs

@@ -353,10 +353,13 @@ var FormStore = class {
       if (field.type === "image_upload" || field.type === "signature") {
         const raw = values[field.id];
         if (raw !== void 0 && raw !== null && raw !== "") {
-          result[field.id] = {
-            _type: "s3_key",
-            value: raw
-          };
+          const key = typeof raw === "string" ? raw : raw.s3_key || raw.value || null;
+          if (key && typeof key === "string") {
+            result[field.id] = {
+              _type: "s3_key",
+              value: key
+            };
+          }
         }
       }
     });
@@ -1539,8 +1542,15 @@ var smoothPoint = (prev, curr, smoothing = 0.75) => {
     y: prev.y * smoothing + curr.y * (1 - smoothing)
   };
 };
+function extractDisplayUrl(value) {
+  if (!value || typeof value !== "object") return null;
+  if (typeof value.presigned_url === "string" && value.presigned_url) {
+    return value.presigned_url;
+  }
+  return null;
+}
 var SignatureUploadWidget = ({ fieldId }) => {
-  const { fieldDef, setValue, setTouched, error, disabled, touched } = useField(fieldId);
+  const { fieldDef, setValue, setTouched, error, disabled, touched, value } = useField(fieldId);
   const store = useFormStore();
   const { state } = useForm();
   const canvasRef = React11.useRef(null);
@@ -1549,13 +1559,14 @@ var SignatureUploadWidget = ({ fieldId }) => {
   const lastTimeRef = React11.useRef(null);
   const lastWidthRef = React11.useRef(2);
   const [isDrawing, setIsDrawing] = React11.useState(false);
-  const [hasSignature, setHasSignature] = React11.useState(false);
+  const [hasDrawing, setHasDrawing] = React11.useState(false);
   const [isUploading, setIsUploading] = React11.useState(false);
+  const [isConfirmed, setIsConfirmed] = React11.useState(false);
   const showError = !!error && (touched || state.submitAttempted);
-  if (!fieldDef) return null;
-  const uploadHandler = store.getUploadHandler();
-  if (!uploadHandler) return null;
+  const displayUrl = React11.useMemo(() => extractDisplayUrl(value), [value]);
+  const showPreview = displayUrl !== null;
   React11.useEffect(() => {
+    if (showPreview) return;
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -1573,7 +1584,9 @@ var SignatureUploadWidget = ({ fieldId }) => {
     ctx.strokeStyle = "#000";
     ctx.fillStyle = "#fff";
     ctx.fillRect(0, 0, width, height);
-  }, []);
+  }, [showPreview]);
+  const uploadHandler = store.getUploadHandler();
+  if (!fieldDef || !uploadHandler) return null;
   const getPoint = (event) => {
     const canvas = canvasRef.current;
     const rect = canvas.getBoundingClientRect();
@@ -1586,6 +1599,7 @@ var SignatureUploadWidget = ({ fieldId }) => {
   const startDrawing = (event) => {
     if (disabled) return;
     setIsDrawing(true);
+    setIsConfirmed(false);
     setTouched();
     const ctx = canvasRef.current?.getContext("2d");
     if (!ctx) return;
@@ -1627,23 +1641,31 @@ var SignatureUploadWidget = ({ fieldId }) => {
     lastPointRef.current = smoothed;
     lastTimeRef.current = now;
     lastWidthRef.current = width;
-    setHasSignature(true);
+    setHasDrawing(true);
   };
   const stopDrawing = () => {
     setIsDrawing(false);
     lastPointRef.current = null;
     lastTimeRef.current = null;
   };
-  const clearCanvas = () => {
+  const clearSignature = () => {
+    if (showPreview) {
+      setValue(null);
+      setTouched();
+      return;
+    }
     const canvas = canvasRef.current;
     const ctx = canvas?.getContext("2d");
-    if (!canvas || !ctx) return;
-    ctx.fillStyle = "#fff";
-    ctx.fillRect(0, 0, 400, 200);
+    if (canvas && ctx) {
+      ctx.fillStyle = "#fff";
+      ctx.fillRect(0, 0, 400, 200);
+    }
     pathRef.current = "";
     lastPointRef.current = null;
-    setHasSignature(false);
+    setHasDrawing(false);
+    setIsConfirmed(false);
     setValue(null);
+    setTouched();
   };
   const generateSVG = () => `
 <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
@@ -1656,7 +1678,7 @@ var SignatureUploadWidget = ({ fieldId }) => {
         fill="none"/>
 </svg>`.trim();
   const confirmSignature = async () => {
-    if (!hasSignature) return;
+    if (!hasDrawing) return;
     setIsUploading(true);
     setTouched();
     try {
@@ -1665,55 +1687,95 @@ var SignatureUploadWidget = ({ fieldId }) => {
       const filename = `signature_${Date.now()}.svg`;
       const key = await uploadHandler(blob, filename);
       setValue(key);
+      setIsConfirmed(true);
+      setHasDrawing(false);
+    } catch (err) {
+      console.error("[SignatureUpload] Upload failed:", err);
     } finally {
       setIsUploading(false);
     }
   };
+  const canClear = showPreview ? !disabled : hasDrawing || isConfirmed;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Label, { children: [
       fieldDef.label,
       fieldDef.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "canvas",
-        {
-          ref: canvasRef,
-          className: "border border-gray-200 rounded cursor-crosshair touch-none",
-          onMouseDown: startDrawing,
-          onMouseMove: draw,
-          onMouseUp: stopDrawing,
-          onMouseLeave: stopDrawing,
-          onTouchStart: startDrawing,
-          onTouchMove: draw,
-          onTouchEnd: stopDrawing
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        Button,
-        {
-          type: "button",
-          size: "icon",
-          variant: "ghost",
-          className: "absolute top-2 left-2 bg-white/80",
-          onClick: clearCanvas,
-          disabled: !hasSignature,
-          children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      Button,
-      {
-        type: "button",
-        onClick: confirmSignature,
-        disabled: !hasSignature || isUploading,
-        className: "text-xs",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-1" }),
-          isUploading ? "Saving\u2026" : "Confirm"
-        ]
-      }
+    showPreview ? (
+      /* ── Preview mode: existing signature from backend ── */
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border border-gray-200 rounded bg-white flex items-center justify-start p-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: displayUrl,
+            alt: "Signature",
+            className: "object-contain max-w-full",
+            style: { width: 400, height: 200 }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon",
+            variant: "ghost",
+            className: "absolute top-2 left-2 bg-white/80 hover:bg-red-50",
+            onClick: clearSignature,
+            disabled: !canClear,
+            title: "Delete signature and draw a new one",
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ) : (
+      /* ── Canvas mode: drawing / confirmed ── */
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "canvas",
+            {
+              ref: canvasRef,
+              className: `border rounded touch-none ${isConfirmed ? "border-green-300 cursor-default" : "border-gray-200 cursor-crosshair"}`,
+              onMouseDown: startDrawing,
+              onMouseMove: draw,
+              onMouseUp: stopDrawing,
+              onMouseLeave: stopDrawing,
+              onTouchStart: startDrawing,
+              onTouchMove: draw,
+              onTouchEnd: stopDrawing
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              type: "button",
+              size: "icon",
+              variant: "ghost",
+              className: "absolute top-2 left-2 bg-white/80",
+              onClick: clearSignature,
+              disabled: !canClear,
+              title: isConfirmed ? "Clear saved signature" : "Clear canvas",
+              children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" })
+            }
+          )
+        ] }),
+        isConfirmed ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-sm text-green-600", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Signature saved" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+          Button,
+          {
+            type: "button",
+            onClick: confirmSignature,
+            disabled: !hasDrawing || isUploading,
+            className: "text-xs",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-1" }),
+              isUploading ? "Saving\u2026" : "Confirm"
+            ]
+          }
+        )
+      ] })
     ),
     showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error })
   ] });
@@ -2271,7 +2333,7 @@ var ReadOnlyText = ({ fieldDef, value }) => {
         className: "prose prose-sm max-w-none text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50",
         dangerouslySetInnerHTML: { __html: displayValue }
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem] flex items-center", children: displayValue || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No value" }) })
+    ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-gray-900 border border-gray-200 rounded-md p-3 bg-gray-50 min-h-[2.5rem] whitespace-pre-wrap", children: displayValue || /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400 italic", children: "No value" }) })
   ] });
 };
 var ReadOnlySelect = ({ fieldDef, value }) => {