formanitor 0.0.9 → 0.0.11

package/dist/index.d.cts

@@ -224,6 +224,7 @@ interface FormState {
     isValid: boolean;
     isSubmitting: boolean;
     submitAttempted?: boolean;
+    pendingUploads: number;
 }
 
 interface SavedState {
@@ -243,12 +244,14 @@ interface PersistenceProvider {
 type Listener = (state: FormState) => void;
 type EventListener = (event: string, payload?: any) => void;
 type UploadHandler = (file: File | Blob, filename: string) => Promise<string>;
+type DraftChangeHandler = (payload: SavedState) => void | Promise<void>;
 interface StoreConfig {
     persistence?: PersistenceProvider;
     prefillData?: Record<string, any>;
     role?: string;
     onEvent?: EventListener;
     onUpload?: UploadHandler;
+    onDraftChange?: DraftChangeHandler;
 }
 declare class FormStore {
     private state;
@@ -259,6 +262,7 @@ declare class FormStore {
     private prefillData;
     private config;
     private saveTimeout;
+    private draftCallbackTimeout;
     constructor(schema: FormDef, config?: StoreConfig);
     private initializeDefaults;
     getState(): FormState;
@@ -277,6 +281,7 @@ declare class FormStore {
     setRole(role: string): void;
     load(): Promise<void>;
     private scheduleSave;
+    private scheduleDraftCallback;
     save(): Promise<void>;
     /**
      * Prepare values for outbound submission to the backend.
@@ -298,7 +303,25 @@ declare class FormStore {
     transition(toState: string): void;
     private checkEvents;
     private emit;
+    /**
+     * Update mutable config properties (callbacks, role) without recreating
+     * the store.  This allows the host app to pass fresh closures (e.g. an
+     * upload handler whose auth token was initially undefined) after the
+     * initial render.
+     */
+    updateConfig(next: Partial<StoreConfig>): void;
     getUploadHandler(): UploadHandler | undefined;
+    private preSubmitHandlers;
+    registerPreSubmitHandler(fieldId: string, fn: () => Promise<void>): void;
+    unregisterPreSubmitHandler(fieldId: string): void;
+    /**
+     * Runs all registered pre-submit handlers in parallel.
+     * Call this before getSerializedValuesForSubmission() to ensure any
+     * unconfirmed signatures (or similar) are uploaded first.
+     */
+    flushPendingUploads(): Promise<void>;
+    incrementPendingUploads(): void;
+    decrementPendingUploads(): void;
     markSubmitAttempted(): void;
     subscribe(listener: Listener): () => void;
     private notify;
@@ -332,6 +355,7 @@ declare function useForm(): {
     hasPersistence: boolean;
     getSerializedValues: () => FormValues;
     markSubmitAttempted: () => void;
+    flushPendingUploads: () => Promise<void>;
 };
 
 declare function useField(fieldId: string): {

package/dist/index.d.ts

@@ -224,6 +224,7 @@ interface FormState {
     isValid: boolean;
     isSubmitting: boolean;
     submitAttempted?: boolean;
+    pendingUploads: number;
 }
 
 interface SavedState {
@@ -243,12 +244,14 @@ interface PersistenceProvider {
 type Listener = (state: FormState) => void;
 type EventListener = (event: string, payload?: any) => void;
 type UploadHandler = (file: File | Blob, filename: string) => Promise<string>;
+type DraftChangeHandler = (payload: SavedState) => void | Promise<void>;
 interface StoreConfig {
     persistence?: PersistenceProvider;
     prefillData?: Record<string, any>;
     role?: string;
     onEvent?: EventListener;
     onUpload?: UploadHandler;
+    onDraftChange?: DraftChangeHandler;
 }
 declare class FormStore {
     private state;
@@ -259,6 +262,7 @@ declare class FormStore {
     private prefillData;
     private config;
     private saveTimeout;
+    private draftCallbackTimeout;
     constructor(schema: FormDef, config?: StoreConfig);
     private initializeDefaults;
     getState(): FormState;
@@ -277,6 +281,7 @@ declare class FormStore {
     setRole(role: string): void;
     load(): Promise<void>;
     private scheduleSave;
+    private scheduleDraftCallback;
     save(): Promise<void>;
     /**
      * Prepare values for outbound submission to the backend.
@@ -298,7 +303,25 @@ declare class FormStore {
     transition(toState: string): void;
     private checkEvents;
     private emit;
+    /**
+     * Update mutable config properties (callbacks, role) without recreating
+     * the store.  This allows the host app to pass fresh closures (e.g. an
+     * upload handler whose auth token was initially undefined) after the
+     * initial render.
+     */
+    updateConfig(next: Partial<StoreConfig>): void;
     getUploadHandler(): UploadHandler | undefined;
+    private preSubmitHandlers;
+    registerPreSubmitHandler(fieldId: string, fn: () => Promise<void>): void;
+    unregisterPreSubmitHandler(fieldId: string): void;
+    /**
+     * Runs all registered pre-submit handlers in parallel.
+     * Call this before getSerializedValuesForSubmission() to ensure any
+     * unconfirmed signatures (or similar) are uploaded first.
+     */
+    flushPendingUploads(): Promise<void>;
+    incrementPendingUploads(): void;
+    decrementPendingUploads(): void;
     markSubmitAttempted(): void;
     subscribe(listener: Listener): () => void;
     private notify;
@@ -332,6 +355,7 @@ declare function useForm(): {
     hasPersistence: boolean;
     getSerializedValues: () => FormValues;
     markSubmitAttempted: () => void;
+    flushPendingUploads: () => Promise<void>;
 };
 
 declare function useField(fieldId: string): {

package/dist/index.mjs

@@ -178,6 +178,7 @@ var FormStore = class {
   config;
   // Cache for debounce
   saveTimeout = null;
+  draftCallbackTimeout = null;
   constructor(schema, config = {}) {
     this.schema = schema;
     this.config = config;
@@ -197,7 +198,8 @@ var FormStore = class {
       workflowState: initialWorkflowState,
       isValid: true,
       isSubmitting: false,
-      submitAttempted: false
+      submitAttempted: false,
+      pendingUploads: 0
     };
     this.initializeDefaults();
     this.evaluate();
@@ -246,7 +248,10 @@ var FormStore = class {
     this.checkEvents(fieldId, "onValueChange", value);
     this.evaluate();
     this.notify();
-    this.scheduleSave();
+    this.scheduleDraftCallback();
+    if (!this.config.onDraftChange) {
+      this.scheduleSave();
+    }
   }
   setTouched(fieldId) {
     if (this.state.touched[fieldId]) return;
@@ -282,6 +287,26 @@ var FormStore = class {
       this.save();
     }, 1e3);
   }
+  scheduleDraftCallback() {
+    if (!this.config.onDraftChange) return;
+    if (this.draftCallbackTimeout) {
+      clearTimeout(this.draftCallbackTimeout);
+    }
+    this.draftCallbackTimeout = setTimeout(() => {
+      const payload = {
+        // For consumer callbacks, send values in the same
+        // serialized shape used for outbound submissions so
+        // media/signature fields are wrapped consistently.
+        values: this.serializeValuesForSubmission(this.state.values),
+        meta: {
+          updatedAt: Date.now(),
+          workflowState: this.state.workflowState,
+          version: this.schema.version
+        }
+      };
+      this.config.onDraftChange?.(payload);
+    }, 2500);
+  }
   async save() {
     const payload = {
       values: this.state.values,
@@ -459,9 +484,53 @@ var FormStore = class {
       this.config.onEvent(event, finalPayload);
     }
   }
+  /**
+   * Update mutable config properties (callbacks, role) without recreating
+   * the store.  This allows the host app to pass fresh closures (e.g. an
+   * upload handler whose auth token was initially undefined) after the
+   * initial render.
+   */
+  updateConfig(next) {
+    let needsReeval = false;
+    if (next.onUpload !== void 0) this.config.onUpload = next.onUpload;
+    if (next.onEvent !== void 0) this.config.onEvent = next.onEvent;
+    if (next.onDraftChange !== void 0) this.config.onDraftChange = next.onDraftChange;
+    if (next.role !== void 0 && next.role !== this.config.role) {
+      this.config.role = next.role;
+      needsReeval = true;
+    }
+    if (needsReeval) {
+      this.evaluate();
+      this.notify();
+    }
+  }
   getUploadHandler() {
     return this.config.onUpload;
   }
+  preSubmitHandlers = /* @__PURE__ */ new Map();
+  registerPreSubmitHandler(fieldId, fn) {
+    this.preSubmitHandlers.set(fieldId, fn);
+  }
+  unregisterPreSubmitHandler(fieldId) {
+    this.preSubmitHandlers.delete(fieldId);
+  }
+  /**
+   * Runs all registered pre-submit handlers in parallel.
+   * Call this before getSerializedValuesForSubmission() to ensure any
+   * unconfirmed signatures (or similar) are uploaded first.
+   */
+  async flushPendingUploads() {
+    const handlers = Array.from(this.preSubmitHandlers.values());
+    await Promise.all(handlers.map((fn) => fn()));
+  }
+  incrementPendingUploads() {
+    this.state.pendingUploads = (this.state.pendingUploads ?? 0) + 1;
+    this.notify();
+  }
+  decrementPendingUploads() {
+    this.state.pendingUploads = Math.max(0, (this.state.pendingUploads ?? 0) - 1);
+    this.notify();
+  }
   // Mark that a submit attempt has been made so UI can decide when to show errors
   markSubmitAttempted() {
     if (!this.state.submitAttempted) {
@@ -493,6 +562,11 @@ var FormProvider = ({ schema, config, children }) => {
   if (!storeRef.current) {
     storeRef.current = new FormStore(schema, config);
   }
+  useEffect(() => {
+    if (storeRef.current && config) {
+      storeRef.current.updateConfig(config);
+    }
+  });
   useEffect(() => {
     storeRef.current?.load();
   }, []);
@@ -523,7 +597,8 @@ function useForm() {
     availableTransitions: store.getAvailableTransitions(),
     hasPersistence: store.hasPersistence(),
     getSerializedValues: store.getSerializedValuesForSubmission.bind(store),
-    markSubmitAttempted: store.markSubmitAttempted.bind(store)
+    markSubmitAttempted: store.markSubmitAttempted.bind(store),
+    flushPendingUploads: store.flushPendingUploads.bind(store)
   };
 }
 function useField(fieldId) {
@@ -1431,6 +1506,7 @@ var ImageUploadWidget = ({ fieldId }) => {
     }
     setIsUploading(true);
     setTouched();
+    store.incrementPendingUploads();
     try {
       const previewUrl = URL.createObjectURL(file);
       setPreview(previewUrl);
@@ -1443,6 +1519,7 @@ var ImageUploadWidget = ({ fieldId }) => {
       setPreview(null);
     } finally {
       setIsUploading(false);
+      store.decrementPendingUploads();
     }
   };
   const handleRemove = () => {
@@ -1542,6 +1619,22 @@ var SignatureUploadWidget = ({ fieldId }) => {
   const [hasDrawing, setHasDrawing] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
   const [isConfirmed, setIsConfirmed] = useState(false);
+  const [uploadError, setUploadError] = useState(null);
+  const confirmSignatureRef = useRef(null);
+  useEffect(() => {
+    if (hasDrawing && !isConfirmed) {
+      store.registerPreSubmitHandler(fieldId, async () => {
+        if (confirmSignatureRef.current) {
+          await confirmSignatureRef.current();
+        }
+      });
+    } else {
+      store.unregisterPreSubmitHandler(fieldId);
+    }
+    return () => {
+      store.unregisterPreSubmitHandler(fieldId);
+    };
+  }, [hasDrawing, isConfirmed, fieldId, store]);
   const showError = !!error && (touched || state.submitAttempted);
   const displayUrl = useMemo(() => extractDisplayUrl(value), [value]);
   const showPreview = displayUrl !== null;
@@ -1580,6 +1673,7 @@ var SignatureUploadWidget = ({ fieldId }) => {
     if (disabled) return;
     setIsDrawing(true);
     setIsConfirmed(false);
+    setUploadError(null);
     setTouched();
     const ctx = canvasRef.current?.getContext("2d");
     if (!ctx) return;
@@ -1660,7 +1754,9 @@ var SignatureUploadWidget = ({ fieldId }) => {
   const confirmSignature = async () => {
     if (!hasDrawing) return;
     setIsUploading(true);
+    setUploadError(null);
     setTouched();
+    store.incrementPendingUploads();
     try {
       const svg = generateSVG();
       const blob = new Blob([svg], { type: "image/svg+xml" });
@@ -1671,10 +1767,15 @@ var SignatureUploadWidget = ({ fieldId }) => {
       setHasDrawing(false);
     } catch (err) {
       console.error("[SignatureUpload] Upload failed:", err);
+      setUploadError(
+        err instanceof Error ? err.message : "Signature upload failed. Please try again."
+      );
     } finally {
       setIsUploading(false);
+      store.decrementPendingUploads();
     }
   };
+  confirmSignatureRef.current = confirmSignature;
   const canClear = showPreview ? !disabled : hasDrawing || isConfirmed;
   return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
     /* @__PURE__ */ jsxs(Label, { children: [
@@ -1742,19 +1843,22 @@ var SignatureUploadWidget = ({ fieldId }) => {
         isConfirmed ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-green-600", children: [
           /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }),
           /* @__PURE__ */ jsx("span", { children: "Signature saved" })
-        ] }) : /* @__PURE__ */ jsxs(
-          Button,
-          {
-            type: "button",
-            onClick: confirmSignature,
-            disabled: !hasDrawing || isUploading,
-            className: "text-xs",
-            children: [
-              /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-1" }),
-              isUploading ? "Saving\u2026" : "Confirm"
-            ]
-          }
-        )
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              type: "button",
+              onClick: confirmSignature,
+              disabled: !hasDrawing || isUploading,
+              className: "text-xs",
+              children: [
+                /* @__PURE__ */ jsx(Check, { className: "h-4 w-4 mr-1" }),
+                isUploading ? "Saving\u2026" : "Confirm"
+              ]
+            }
+          ),
+          uploadError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500 mt-1", children: uploadError })
+        ] })
       ] })
     ),
     showError && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
@@ -2740,6 +2844,7 @@ var FormControls = ({
   onSubmit
 }) => {
   const { state, availableTransitions, submit, transition, hasPersistence, markSubmitAttempted } = useForm();
+  const hasUploadsInFlight = (state.pendingUploads ?? 0) > 0;
   const draftAvailable = onSaveDraft || hasPersistence && submit;
   const submitAvailable = onSubmit || availableTransitions.length > 0 && transition;
   if (!draftAvailable && !submitAvailable) {
@@ -2760,7 +2865,8 @@ var FormControls = ({
           onClick: onSaveDraft || submit,
           variant: "outline",
           size: "sm",
-          children: "Save Draft"
+          disabled: hasUploadsInFlight,
+          children: hasUploadsInFlight ? "Upload in progress\u2026" : "Save Draft"
         }
       ),
       submitAvailable && /* @__PURE__ */ jsx(Fragment, { children: availableTransitions.length > 0 ? availableTransitions.map((t) => /* @__PURE__ */ jsx(
@@ -2774,9 +2880,9 @@ var FormControls = ({
               transition(t.to);
             }
           },
-          disabled: !state.isValid,
+          disabled: !state.isValid || hasUploadsInFlight,
           size: "sm",
-          children: availableTransitions.length > 1 ? `Submit to ${t.to}` : "Submit"
+          children: hasUploadsInFlight ? "Upload in progress\u2026" : availableTransitions.length > 1 ? `Submit to ${t.to}` : "Submit"
         },
         t.to
       )) : onSubmit ? /* @__PURE__ */ jsx(
@@ -2786,9 +2892,9 @@ var FormControls = ({
             markSubmitAttempted();
             onSubmit(state.workflowState || "submit");
           },
-          disabled: !state.isValid,
+          disabled: !state.isValid || hasUploadsInFlight,
           size: "sm",
-          children: "Submit"
+          children: hasUploadsInFlight ? "Upload in progress\u2026" : "Submit"
         }
       ) : null })
     ] })