formanitor 0.0.48 → 0.0.49

package/dist/index.cjs

@@ -67,8 +67,25 @@ function fieldMetaRequestsMarMedicationOrdersButton(meta) {
 
 // src/core/validate.ts
 var EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-function validateField(value, field) {
+function validateField(value, field, allValues) {
   if (field.hidden || field.disabled) return null;
+  if (field.type === "otp_input") {
+    if (field.required) {
+      if (!value || typeof value !== "object" || value.verified !== true) {
+        return "Please verify your mobile number with OTP";
+      }
+      const otpField = field;
+      const phoneFieldId = otpField.meta?.phoneFieldId ?? "phone";
+      if (allValues) {
+        const phoneRaw = allValues[phoneFieldId] ?? "";
+        const e164 = phoneRaw.startsWith("+") ? phoneRaw : `+91${phoneRaw}`;
+        if (value.phone && value.phone !== e164) {
+          return "Mobile number changed \u2014 please re-verify";
+        }
+      }
+    }
+    return null;
+  }
   if (field.required) {
     if (value === null || value === void 0 || value === "") {
       return "This field is required";
@@ -129,7 +146,7 @@ function validateForm(values, fields) {
   const errors = {};
   for (const [key, field] of Object.entries(fields)) {
     if (field.type === "static_text") continue;
-    const error = validateField(values[key], field);
+    const error = validateField(values[key], field, values);
     if (error) {
       errors[key] = error;
     }
@@ -1206,6 +1223,9 @@ var FormStore = class {
   persistence;
   prefillData = {};
   config;
+  // Widget-owned errors that schema validation cannot express (e.g. "OTP not sent yet").
+  // Merged on top of validateForm output in evaluate().
+  externalErrors = {};
   // Cache for debounce
   saveTimeout = null;
   draftCallbackTimeout = null;
@@ -1325,6 +1345,9 @@ var FormStore = class {
   getSchema() {
     return this.schema;
   }
+  getConfig() {
+    return this.config;
+  }
   getFieldDef(fieldId) {
     return this.fieldMap[fieldId];
   }
@@ -1372,6 +1395,17 @@ var FormStore = class {
     this.notify();
     this.scheduleSave();
   }
+  /**
+   * Let a widget report an error that schema validation cannot express
+   * (e.g. "Send OTP to continue" until the API call succeeds).
+   * Pass `null` to clear a previously set external error.
+   */
+  setExternalError(fieldId, message) {
+    if ((this.externalErrors[fieldId] ?? null) === message) return;
+    this.externalErrors = { ...this.externalErrors, [fieldId]: message };
+    this.evaluate();
+    this.notify();
+  }
   setTouched(fieldId) {
     if (this.state.touched[fieldId]) return;
     this.state.touched = { ...this.state.touched, [fieldId]: true };
@@ -1500,6 +1534,20 @@ var FormStore = class {
         result[field.id] = parts.length > 0 ? parts.join("\n\n") : null;
         return;
       }
+      if (field.type === "otp_input") {
+        const raw = values[field.id];
+        if (typeof raw === "string") {
+          result[field.id] = raw;
+          return;
+        }
+        if (raw && typeof raw === "object" && !Array.isArray(raw) && raw.verified === true) {
+          const code = raw.code;
+          result[field.id] = typeof code === "string" ? code : null;
+          return;
+        }
+        result[field.id] = null;
+        return;
+      }
       if (field.type === "image_upload" || field.type === "media_upload" || field.type === "signature") {
         const raw = values[field.id];
         if (raw !== void 0 && raw !== null && raw !== "") {
@@ -1616,8 +1664,12 @@ var FormStore = class {
       };
     });
     const errors = validateForm(this.state.values, effectiveFields);
-    this.state.errors = errors;
-    this.state.isValid = Object.keys(errors).length === 0;
+    const merged = { ...errors };
+    for (const [id, msg] of Object.entries(this.externalErrors)) {
+      if (msg) merged[id] = msg;
+    }
+    this.state.errors = merged;
+    this.state.isValid = Object.keys(merged).length === 0;
   }
   // --- Workflow ---
   getAvailableTransitions() {
@@ -13810,6 +13862,347 @@ var OBGPathwayWidget = ({ fieldId }) => {
     ] })
   ] });
 };
+var RESEND_COOLDOWN_SECONDS = 30;
+var PhoneInputWidget = ({ fieldId }) => {
+  const { fieldDef, error, touched, disabled, value: fieldValue } = useField(fieldId);
+  const { state } = useForm();
+  const store = useFormStore();
+  const rawPhone = fieldValue ?? "";
+  const wasAlreadySent = rawPhone.length === 10 && !error;
+  const [status, setStatus] = React15.useState(wasAlreadySent ? "sent" : "idle");
+  const [resendCooldown, setResendCooldown] = React15.useState(0);
+  const [resendError, setResendError] = React15.useState("");
+  const hasSentRef = React15.useRef(wasAlreadySent);
+  const sentPhoneRef = React15.useRef(wasAlreadySent ? rawPhone : "");
+  const isSendingRef = React15.useRef(false);
+  const isResendingRef = React15.useRef(false);
+  const showError = !!error && (touched || state.submitAttempted) && status !== "sending" && status !== "sent";
+  React15.useEffect(() => {
+    if (resendCooldown <= 0) return;
+    const t = setTimeout(() => setResendCooldown((c) => Math.max(0, c - 1)), 1e3);
+    return () => clearTimeout(t);
+  }, [resendCooldown]);
+  if (!fieldDef) return null;
+  const placeholder = typeof fieldDef.placeholder === "string" && fieldDef.placeholder.trim() ? fieldDef.placeholder : "Enter 10-digit mobile number";
+  const handleChange = (e) => {
+    const digits = e.target.value.replace(/\D/g, "").slice(0, 10);
+    if (hasSentRef.current && digits !== sentPhoneRef.current) {
+      hasSentRef.current = false;
+      sentPhoneRef.current = "";
+      setStatus("idle");
+      setResendCooldown(0);
+      setResendError("");
+      store.setExternalError(fieldId, "Send OTP to continue");
+      const otpFieldId = fieldDef.meta?.otpFieldId;
+      if (otpFieldId) {
+        store.setValue(otpFieldId, "");
+        store.setExternalError(otpFieldId, "Verify OTP to continue");
+      }
+    }
+    store.setValue(fieldId, digits);
+    if (digits.length === 10 && !hasSentRef.current && !isSendingRef.current) {
+      sendOtp(digits);
+    }
+  };
+  const sendOtp = async (phone) => {
+    if (isSendingRef.current) return;
+    isSendingRef.current = true;
+    setStatus("sending");
+    store.setExternalError(fieldId, "Sending OTP...");
+    try {
+      const authCfg = store.getConfig().auth;
+      const base = authCfg?.baseUrl ?? ((typeof process !== "undefined" && process.env?.NEXT_PUBLIC_API_URL) ?? "");
+      const sendPath = authCfg?.sendPath ?? "/api/auth/otp/send/";
+      const countryCode = authCfg?.defaultCountryCode ?? "+91";
+      const res = await fetch(`${base}${sendPath}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ mobile_number: `${countryCode}${phone}` })
+      });
+      const data = await res.json().catch(() => ({}));
+      if (res.ok) {
+        hasSentRef.current = true;
+        sentPhoneRef.current = phone;
+        setStatus("sent");
+        setResendCooldown(RESEND_COOLDOWN_SECONDS);
+        store.setExternalError(fieldId, null);
+      } else {
+        setStatus("error");
+        store.setExternalError(fieldId, data.error ?? "Failed to send OTP. Please try again.");
+      }
+    } catch {
+      setStatus("error");
+      store.setExternalError(fieldId, "Network error. Please try again.");
+    } finally {
+      isSendingRef.current = false;
+    }
+  };
+  const handleResend = async () => {
+    if (isResendingRef.current || resendCooldown > 0) return;
+    isResendingRef.current = true;
+    setResendError("");
+    try {
+      const authCfg = store.getConfig().auth;
+      const base = authCfg?.baseUrl ?? ((typeof process !== "undefined" && process.env?.NEXT_PUBLIC_API_URL) ?? "");
+      const resendPath = authCfg?.resendPath ?? "/api/auth/otp/resend/";
+      const countryCode = authCfg?.defaultCountryCode ?? "+91";
+      const res = await fetch(`${base}${resendPath}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ mobile_number: `${countryCode}${rawPhone}`, retrytype: "text" })
+      });
+      const data = await res.json().catch(() => ({}));
+      if (res.ok) {
+        setResendCooldown(RESEND_COOLDOWN_SECONDS);
+        setResendError("");
+      } else {
+        setResendError(data.error ?? "Failed to resend OTP. Please try again.");
+      }
+    } catch {
+      setResendError("Network error. Please try again.");
+    } finally {
+      isResendingRef.current = false;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: fieldId, children: [
+      fieldDef.label,
+      " ",
+      fieldDef.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: fieldId,
+          type: "tel",
+          inputMode: "numeric",
+          value: rawPhone,
+          onChange: handleChange,
+          onBlur: () => store.setTouched(fieldId),
+          disabled: disabled || status === "sending",
+          placeholder,
+          maxLength: 10,
+          className: cn(
+            showError && "border-red-500",
+            status === "sent" && "border-green-500 pr-9",
+            status === "sending" && "pr-9"
+          )
+        }
+      ),
+      status === "sending" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          className: "animate-spin h-4 w-4 text-muted-foreground",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8v8H4z"
+              }
+            )
+          ]
+        }
+      ) }),
+      status === "sent" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "h-4 w-4 text-green-500",
+          viewBox: "0 0 20 20",
+          fill: "currentColor",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+              clipRule: "evenodd"
+            }
+          )
+        }
+      ) })
+    ] }),
+    status === "sent" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-green-600", children: [
+      "OTP sent to +91",
+      rawPhone
+    ] }),
+    showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error }),
+    status === "sent" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Didn't receive it?" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: handleResend,
+          disabled: resendCooldown > 0,
+          className: cn(
+            "underline transition-colors",
+            resendCooldown > 0 ? "opacity-40 cursor-not-allowed" : "text-primary hover:text-primary/80 cursor-pointer"
+          ),
+          children: resendCooldown > 0 ? `Resend in ${resendCooldown}s` : "Resend OTP"
+        }
+      )
+    ] }),
+    resendError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: resendError })
+  ] });
+};
+var OtpInputWidget = ({ fieldId }) => {
+  const { fieldDef, error, touched, disabled } = useField(fieldId);
+  const { state } = useForm();
+  const store = useFormStore();
+  const phoneFieldId = fieldDef?.meta?.phoneFieldId ?? "phone";
+  const { value: phoneValue } = useField(phoneFieldId);
+  const phone = phoneValue ?? "";
+  const e164Phone = phone.startsWith("+") ? phone : `+91${phone}`;
+  const [otp, setOtp] = React15.useState("");
+  const [status, setStatus] = React15.useState("idle");
+  const isVerifyingRef = React15.useRef(false);
+  const showError = !!error && (touched || state.submitAttempted) && status !== "verifying" && status !== "verified";
+  if (!fieldDef) return null;
+  const placeholder = typeof fieldDef.placeholder === "string" && fieldDef.placeholder.trim() ? fieldDef.placeholder : "Enter 4-digit OTP";
+  const handleChange = (e) => {
+    const digits = e.target.value.replace(/\D/g, "").slice(0, 4);
+    if (status === "failed") {
+      setStatus("idle");
+      store.setExternalError(fieldId, null);
+    }
+    setOtp(digits);
+    store.setValue(fieldId, digits);
+    if (digits.length === 4 && !isVerifyingRef.current) {
+      verifyOtp(digits);
+    }
+  };
+  const verifyOtp = async (code) => {
+    if (isVerifyingRef.current) return;
+    isVerifyingRef.current = true;
+    setStatus("verifying");
+    store.setExternalError(fieldId, "Verifying...");
+    try {
+      const authCfg = store.getConfig().auth;
+      const base = authCfg?.baseUrl ?? ((typeof process !== "undefined" && process.env?.NEXT_PUBLIC_API_URL) ?? "");
+      const verifyPath = authCfg?.verifyPath ?? "/api/auth/otp/verify/";
+      const res = await fetch(`${base}${verifyPath}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ mobile_number: e164Phone, otp_code: code })
+      });
+      const data = await res.json().catch(() => ({}));
+      if (res.ok) {
+        setStatus("verified");
+        store.setExternalError(fieldId, null);
+        store.setValue(fieldId, {
+          verified: true,
+          phone: e164Phone,
+          code,
+          ...data?.verification_token ? { token: data.verification_token } : {}
+        });
+      } else {
+        setStatus("failed");
+        const msg = data.error ?? "Invalid OTP. Please try again.";
+        store.setExternalError(fieldId, msg);
+        setOtp("");
+        store.setValue(fieldId, "");
+      }
+    } catch {
+      setStatus("failed");
+      store.setExternalError(fieldId, "Network error. Please try again.");
+      setOtp("");
+      store.setValue(fieldId, "");
+    } finally {
+      isVerifyingRef.current = false;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: fieldId, children: [
+      fieldDef.label,
+      " ",
+      fieldDef.required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Input,
+        {
+          id: fieldId,
+          type: "tel",
+          inputMode: "numeric",
+          value: otp,
+          onChange: handleChange,
+          onBlur: () => store.setTouched(fieldId),
+          disabled: disabled || status === "verifying" || status === "verified",
+          placeholder,
+          maxLength: 4,
+          className: cn(
+            "tracking-widest text-center text-lg",
+            showError && "border-red-500",
+            status === "verified" && "border-green-500 pr-9",
+            status === "verifying" && "pr-9"
+          )
+        }
+      ),
+      status === "verifying" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "svg",
+        {
+          className: "animate-spin h-4 w-4 text-muted-foreground",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "circle",
+              {
+                className: "opacity-25",
+                cx: "12",
+                cy: "12",
+                r: "10",
+                stroke: "currentColor",
+                strokeWidth: "4"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "path",
+              {
+                className: "opacity-75",
+                fill: "currentColor",
+                d: "M4 12a8 8 0 018-8v8H4z"
+              }
+            )
+          ]
+        }
+      ) }),
+      status === "verified" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 right-3 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "h-4 w-4 text-green-500",
+          viewBox: "0 0 20 20",
+          fill: "currentColor",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              fillRule: "evenodd",
+              d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z",
+              clipRule: "evenodd"
+            }
+          )
+        }
+      ) })
+    ] }),
+    status === "verified" && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-green-600", children: "Mobile number verified successfully" }),
+    showError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-red-500", children: error })
+  ] });
+};
 var FieldRenderer = ({ fieldId }) => {
   const { fieldDef, visible } = useField(fieldId);
   if (!visible || !fieldDef) {
@@ -13901,6 +14294,10 @@ function renderWidget(fieldId, fieldDef) {
       return /* @__PURE__ */ jsxRuntime.jsx(OBGExaminationWidget, { fieldId });
     case "obg_pathway":
       return /* @__PURE__ */ jsxRuntime.jsx(OBGPathwayWidget, { fieldId });
+    case "phone_input":
+      return /* @__PURE__ */ jsxRuntime.jsx(PhoneInputWidget, { fieldId });
+    case "otp_input":
+      return /* @__PURE__ */ jsxRuntime.jsx(OtpInputWidget, { fieldId });
     case "toggle": {
       const { value, setValue, setTouched, disabled } = useField(fieldId);
       const store = useFormStore();
@@ -14021,16 +14418,6 @@ var DynamicForm = () => {
     })
   ] });
 };
-function PlainSection({
-  title,
-  showHeading,
-  children
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 space-y-4", children: [
-    showHeading ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-medium text-foreground", children: title }) : null,
-    children
-  ] });
-}
 function renderSectionChildren(children) {
   return children.map((child, index) => {
     if (typeof child === "string") {
@@ -14050,6 +14437,16 @@ function renderSectionChildren(children) {
     return /* @__PURE__ */ jsxRuntime.jsx(React15__namespace.default.Fragment, {}, index);
   });
 }
+function PlainSection({
+  title,
+  showHeading,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 space-y-4", children: [
+    showHeading ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-medium text-foreground", children: title }) : null,
+    children
+  ] });
+}
 var DynamicFormV2 = ({
   showTitle = true,
   sectionMode = "plain",
@@ -14090,6 +14487,247 @@ var DynamicFormV2 = ({
     })
   ] });
 };
+function flattenStepFieldIds(step) {
+  const ids = [];
+  for (const child of step.children) {
+    if (typeof child === "string") {
+      ids.push(child);
+    } else if (child.type === "column_layout") {
+      ids.push(...child.children);
+    }
+  }
+  return ids;
+}
+function isFieldComplete(id, state, fieldMap) {
+  if (state.visibility[id] === false) return true;
+  if (state.errors[id]) return false;
+  const def = fieldMap[id];
+  if (def?.required) {
+    const v = state.values[id];
+    if (v === null || v === void 0 || v === "") return false;
+    if (Array.isArray(v) && v.length === 0) return false;
+  }
+  return true;
+}
+function isStepComplete(step, state, fieldMap) {
+  return flattenStepFieldIds(step).every(
+    (id) => isFieldComplete(id, state, fieldMap)
+  );
+}
+var Stepper2 = ({ steps, statuses, variant }) => {
+  if (variant === "dots") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 mb-6", children: steps.map((step, i) => {
+      const status = statuses[i];
+      return /* @__PURE__ */ jsxRuntime.jsxs(React15__namespace.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "h-2.5 w-2.5 rounded-full transition-colors",
+              status === "complete" && "bg-primary",
+              status === "active" && "bg-primary ring-2 ring-primary/30",
+              status === "locked" && "bg-muted"
+            ),
+            title: step.title
+          }
+        ),
+        i < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex-1 h-px transition-colors",
+              status === "complete" ? "bg-primary" : "bg-border"
+            )
+          }
+        )
+      ] }, step.id);
+    }) });
+  }
+  if (variant === "labels") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0 mb-6", children: steps.map((step, i) => {
+      const status = statuses[i];
+      return /* @__PURE__ */ jsxRuntime.jsxs(React15__namespace.default.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: cn(
+                "h-2 w-2 rounded-full",
+                status === "complete" && "bg-primary",
+                status === "active" && "bg-primary",
+                status === "locked" && "bg-muted"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn(
+                "text-xs whitespace-nowrap",
+                status === "locked" ? "text-muted-foreground" : "text-foreground"
+              ),
+              children: step.title
+            }
+          )
+        ] }),
+        i < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex-1 h-px mb-4 transition-colors",
+              status === "complete" ? "bg-primary" : "bg-border"
+            )
+          }
+        )
+      ] }, step.id);
+    }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-0 mb-6", children: steps.map((step, i) => {
+    const status = statuses[i];
+    return /* @__PURE__ */ jsxRuntime.jsxs(React15__namespace.default.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-7 w-7 items-center justify-center rounded-full text-xs font-semibold border-2 transition-colors",
+              status === "complete" && "border-primary bg-primary text-primary-foreground",
+              status === "active" && "border-primary bg-background text-primary",
+              status === "locked" && "border-border bg-background text-muted-foreground"
+            ),
+            children: status === "complete" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5" }) : i + 1
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: cn(
+              "text-sm font-medium hidden sm:block",
+              status === "locked" ? "text-muted-foreground" : "text-foreground"
+            ),
+            children: step.title
+          }
+        )
+      ] }),
+      i < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "flex-1 h-px mx-3 transition-colors",
+            status === "complete" ? "bg-primary" : "bg-border"
+          )
+        }
+      )
+    ] }, step.id);
+  }) });
+};
+var ActiveStep = ({
+  title,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 space-y-4", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-medium text-foreground", children: title }),
+  children
+] });
+var Wizard = ({ node }) => {
+  const store = useFormStore();
+  const [formState, setFormState] = React15.useState(() => ({
+    ...store.getState()
+  }));
+  React15.useEffect(() => {
+    return store.subscribe((state) => {
+      console.log("[MultiStepForm] store update \u2192", {
+        values: state.values,
+        errors: state.errors,
+        visibility: state.visibility
+      });
+      setFormState({ ...state });
+    });
+  }, [store]);
+  const schema = store.getSchema();
+  const fieldMap = {};
+  schema.fields.forEach((f) => {
+    fieldMap[f.id] = f;
+  });
+  const { steps, meta } = node;
+  const showStepper = meta?.showStepper !== false;
+  const variant = meta?.stepperVariant ?? "numbered";
+  const collapseCompleted = meta?.collapseCompleted !== false;
+  const stepComplete = steps.map((s) => {
+    const fieldIds = flattenStepFieldIds(s);
+    const complete = isStepComplete(s, formState, fieldMap);
+    console.log(`[MultiStepForm] step "${s.id}" fieldIds=${JSON.stringify(fieldIds)} complete=${complete}`, {
+      errors: fieldIds.map((id) => ({ id, error: formState.errors[id] })),
+      values: fieldIds.map((id) => ({ id, value: formState.values[id] }))
+    });
+    return complete;
+  });
+  const activeIndex = stepComplete.findIndex((c) => !c) === -1 ? steps.length : stepComplete.findIndex((c) => !c);
+  console.log(`[MultiStepForm] activeIndex=${activeIndex} stepComplete=${JSON.stringify(stepComplete)}`);
+  const statuses = steps.map((_, i) => {
+    if (i < activeIndex) return "complete";
+    if (i === activeIndex) return "active";
+    return "locked";
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    node.title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold mb-4", children: node.title }),
+    showStepper && /* @__PURE__ */ jsxRuntime.jsx(Stepper2, { steps, statuses, variant }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: steps.map((step, i) => {
+      const status = statuses[i];
+      if (status === "locked") return null;
+      const children = renderSectionChildren(step.children);
+      if (status === "complete") {
+        if (collapseCompleted) {
+          return /* @__PURE__ */ jsxRuntime.jsx(Section, { title: step.title, children }, step.id);
+        }
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "mb-4 opacity-60 pointer-events-none select-none space-y-4",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-medium text-foreground", children: step.title }),
+              children
+            ]
+          },
+          step.id
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(ActiveStep, { title: step.title, children }, step.id);
+    }) })
+  ] });
+};
+var MultiStepForm = ({
+  showTitle = true,
+  className
+}) => {
+  const store = useFormStore();
+  const schema = store.getSchema();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("space-y-6", className), children: [
+    showTitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold", children: schema.title }) }),
+    schema.layout.map((node) => {
+      if (node.type === "multi_step") {
+        return /* @__PURE__ */ jsxRuntime.jsx(Wizard, { node }, node.id);
+      }
+      if (node.type === "section") {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6 space-y-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-medium text-foreground", children: node.title }),
+          renderSectionChildren(node.children)
+        ] }, node.id);
+      }
+      if (node.type === "column_layout") {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ColumnLayout,
+          {
+            columns: node.columns,
+            label: node.label,
+            children: node.children.map((fieldId) => /* @__PURE__ */ jsxRuntime.jsx(FieldRenderer, { fieldId }, fieldId))
+          },
+          node.id
+        );
+      }
+      return null;
+    })
+  ] });
+};
 var SUGGESTION_KEYS = /* @__PURE__ */ new Set(["medications", "investigations", "procedures"]);
 function shallowEqualKeys(a, b) {
   const keysA = Object.keys(a);
@@ -15052,7 +15690,8 @@ var FormControls = ({
   actionsFullWidth = false,
   buttonClassName,
   onSaveDraft,
-  onSubmit
+  onSubmit,
+  submitLabel
 }) => {
   const {
     state,
@@ -15141,7 +15780,7 @@ var FormControls = ({
                   disabled: !state.isValid || hasUploadsInFlight,
                   size: "sm",
                   className: buttonCn,
-                  children: hasUploadsInFlight ? "Upload in progress\u2026" : availableTransitions.length > 1 ? `Submit to ${t.to}` : "Submit"
+                  children: hasUploadsInFlight ? "Upload in progress\u2026" : availableTransitions.length > 1 ? `Submit to ${t.to}` : submitLabel ?? "Submit"
                 },
                 t.to
               )) : onSubmit ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -15154,7 +15793,7 @@ var FormControls = ({
                   disabled: !state.isValid || hasUploadsInFlight,
                   size: "sm",
                   className: buttonCn,
-                  children: hasUploadsInFlight ? "Upload in progress\u2026" : "Submit"
+                  children: hasUploadsInFlight ? "Upload in progress\u2026" : submitLabel ?? "Submit"
                 }
               ) : null })
             ]
@@ -15208,6 +15847,7 @@ exports.FormStore = FormStore;
 exports.ImageUploadWidget = ImageUploadWidget;
 exports.MAR_MEDICATION_ORDERS_META_KEY = MAR_MEDICATION_ORDERS_META_KEY;
 exports.MediaUploadWidget = MediaUploadWidget;
+exports.MultiStepForm = MultiStepForm;
 exports.ReadOnlyForm = ReadOnlyForm;
 exports.ReadOnlyImageUpload = ReadOnlyImageUpload;
 exports.ReadOnlyMediaUpload = ReadOnlyMediaUpload;