@digiform/wizard 0.2.10 → 0.2.16

package/wizard/src/features/dialog-system/components/EmailVerificationDialog/EmailVerificationDialog.module.css.js

@@ -0,0 +1,40 @@
+"use client";
+const o = "fb-dialogContent_hdJb3", e = "fb-headerRow_dowgv", n = "fb-iconSuccess_787to", t = "fb-iconMail_yICFX", c = "fb-successButtonRow_LilmE", s = "fb-minWidthButton_Y-HfD", d = "fb-formContent_DRlgi", i = "fb-codeSection_vJqzI", f = "fb-codeLabel_PvgkB", b = "fb-codeCenter_j2TST", r = "fb-resendText_fsAeq", u = "fb-blockedText_ZGaBs", l = "fb-resendLink_dRMub", a = "fb-resendLinkDefault_sVy7D", _ = "fb-footerButtonRow_dFkH0", k = "fb-iconSm_JkMbO", B = "fb-iconMd_y--1E", R = {
+  dialogContent: o,
+  headerRow: e,
+  iconSuccess: n,
+  iconMail: t,
+  successButtonRow: c,
+  minWidthButton: s,
+  formContent: d,
+  codeSection: i,
+  codeLabel: f,
+  codeCenter: b,
+  resendText: r,
+  blockedText: u,
+  resendLink: l,
+  resendLinkDefault: a,
+  footerButtonRow: _,
+  iconSm: k,
+  iconMd: B
+};
+export {
+  u as blockedText,
+  b as codeCenter,
+  f as codeLabel,
+  i as codeSection,
+  R as default,
+  o as dialogContent,
+  _ as footerButtonRow,
+  d as formContent,
+  e as headerRow,
+  t as iconMail,
+  B as iconMd,
+  k as iconSm,
+  n as iconSuccess,
+  s as minWidthButton,
+  l as resendLink,
+  a as resendLinkDefault,
+  r as resendText,
+  c as successButtonRow
+};

package/wizard/src/features/form-runtime/ComponentAdapterComplete/ComponentAdapterComplete.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as l, jsxs as m } from "react/jsx-runtime";
+import c from "./ComponentAdapterComplete.module.css.js";
+import { FormFieldWrapper as x } from "../../../../../ui/src/design-system/components/FormFieldWrapper.js";
+/* empty css                               */
+import { renderComponent as C } from "../../../../../ui/src/component-registry/renderComponent.js";
+const a = {
+  text: "text",
+  date: "date",
+  tel: "tel",
+  email: "email",
+  number: "number",
+  checkbox: "checkbox",
+  radioGroup: "radioGroup",
+  dropdown: "dropdown",
+  button: "button",
+  heading: "heading",
+  paragraph: "paragraph",
+  alert: "alert",
+  password: "password",
+  textarea: "textarea",
+  range: "range",
+  time: "time",
+  "datetime-local": "datetime-local",
+  radio: "radio",
+  select: "select",
+  file: "file",
+  hidden: "hidden",
+  submit: "submit",
+  reset: "reset",
+  "code-input": "code-input",
+  "progress-loader": "progress-loader"
+}, F = (e) => a[e] ? a[e] : (console.warn(
+  `⚠️ [ComponentAdapter] Component type "${e}" not found in TYPE_MAP, falling back to "text". Available types: ${Object.keys(a).join(", ")}`
+), "text"), O = (e) => e.map((r) => ({
+  id: r.id,
+  field: r.field || r.targetComponentId || "",
+  // Ensure field is always set
+  targetStepId: r.targetStepId || "",
+  // Default empty as form wizard doesn't have this concept
+  targetComponentId: r.field || r.targetComponentId,
+  // Map field to targetComponentId
+  operator: w(r.operator),
+  value: r.value,
+  logicalOperator: r.logicalOperator
+})), v = {
+  equals: "equals",
+  notEquals: "notEquals",
+  contains: "contains",
+  empty: "empty",
+  notEmpty: "notEmpty"
+}, w = (e) => v[e] || "equals", I = [
+  "heading",
+  "paragraph",
+  "alert",
+  "button",
+  "progress-loader"
+], _ = (e, r, u, g, o, f, y) => {
+  try {
+    const t = F(e.type), h = {
+      // Base component properties
+      ...e,
+      // Override the type with the mapped version
+      type: t,
+      // Spread all properties from component.properties to the top level for backward compatibility
+      ...e.properties,
+      // Add onBlur if provided
+      ...o && { onBlur: o },
+      // Keep the properties object with potential overrides
+      properties: {
+        ...e.properties,
+        // Also set readOnly in the nested properties object
+        readOnly: g ?? e.properties?.readOnly ?? !1,
+        // Add onBlur to nested properties if provided
+        ...o && { onBlur: o }
+      },
+      // Convert conditions if they exist
+      conditions: e.conditions ? O(e.conditions) : void 0
+    }, s = C({
+      component: h,
+      value: r,
+      onChange: u,
+      isFormView: !0
+    }), E = !I.includes(t), n = e.id, i = f?.[n], p = y?.context?.fieldStates?.[n]?.error, d = e.properties?.errorMessage || i || p, b = e.properties?.invalid === !0 || !!i || !!p;
+    return E ? /* @__PURE__ */ l(
+      x,
+      {
+        invalid: b,
+        errorMessage: typeof d == "string" ? d : void 0,
+        className: "form-field-wrapper",
+        input: s
+      }
+    ) : s;
+  } catch (t) {
+    return console.error("Error rendering component with registry:", t), /* @__PURE__ */ m("div", { className: c.errorFallback, children: [
+      /* @__PURE__ */ m("p", { children: [
+        "Failed to render component: ",
+        e.type
+      ] }),
+      /* @__PURE__ */ l("p", { className: c.errorDetail, children: t instanceof Error ? t.message : String(t) })
+    ] });
+  }
+};
+export {
+  _ as adaptComponentForRegistry,
+  _ as default
+};

package/wizard/src/features/form-runtime/ComponentAdapterComplete/ComponentAdapterComplete.module.css.js

@@ -0,0 +1,10 @@
+"use client";
+const r = "fb-errorFallback_CNx1M", e = "fb-errorDetail_Nvh9V", l = {
+  errorFallback: r,
+  errorDetail: e
+};
+export {
+  l as default,
+  e as errorDetail,
+  r as errorFallback
+};

package/wizard/src/features/form-runtime/FormWizard/FormWizard.js

@@ -0,0 +1,107 @@
+"use client";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { useFormMachineProvider as E, FormMachineContext as z } from "../../state-management/machines/useFormMachine.js";
+import { ActionManager as M } from "../../trigger-action-system/components/ActionManager.js";
+/* empty css                               */
+import { FormLayout as s } from "../../../../../ui/src/components/FormLayout/FormLayout.js";
+import { formWizardQueryClient as N } from "../../../../../ui/src/lib/queryClient.js";
+import { QueryClientProvider as W } from "@tanstack/react-query";
+import { clsx as g } from "clsx";
+import { memo as w, useState as h, useEffect as L, useMemo as u } from "react";
+import n from "./FormWizard.module.css.js";
+import P from "../components/FormStep/FormStep.js";
+import T from "../components/StepProgressIndicator/StepProgressIndicator.js";
+import { hasTemplateSteps as I, resolveFormWizardConfig as x } from "../config/configResolver.js";
+import { ThemeProvider as b, useThemeConfig as U } from "../../../../../ui/src/theme/ThemeProvider.js";
+import j from "../../../../../ui/src/lib/error-boundaries/FormWizardErrorBoundary.js";
+import { FormEditingProvider as O } from "../../../../../ui/src/lib/providers/FormEditingContext.js";
+import m from "../../../../../ui/src/lib/error-boundaries/ComponentErrorBoundary.js";
+import { ValidationEngine as V } from "../../validation-system/validation/ValidationEngine.js";
+import { Heading as k } from "@rijkshuisstijl-community/components-react";
+const v = w(
+  ({
+    config: r,
+    initialData: a = {},
+    onSubmit: y,
+    queryClient: C = N
+  }) => {
+    console.log(
+      "🏁 [FormWizard] FormWizardCore component MOUNTING with config:",
+      {
+        configId: r.id,
+        configTitle: r.title,
+        stepCount: r.steps?.length,
+        validationMessageStyle: r.validationMessageStyle,
+        hasInitialData: Object.keys(a).length > 0
+      }
+    ), typeof window < "u" && setTimeout(() => {
+      console.log(
+        "🚨 [FormWizard] MOUNTED SUCCESSFULLY - Check console for detailed logs"
+      );
+    }, 100);
+    const [t, d] = h(null), [c, f] = h(null);
+    L(() => {
+      (async () => {
+        try {
+          if (f(null), I(r)) {
+            const o = await x(r);
+            d(o);
+          } else
+            d(r);
+        } catch (o) {
+          f(
+            o instanceof Error ? o.message : "Failed to resolve configuration"
+          ), console.error("Error resolving form configuration:", o);
+        }
+      })();
+    }, [r]);
+    const p = u(() => {
+      console.log(
+        "🚀 [FormWizard] Creating ValidationEngine with messageStyle:",
+        r.validationMessageStyle || "withLabel"
+      );
+      const i = new V({
+        messageStyle: r.validationMessageStyle || "withLabel"
+      });
+      return console.log("✅ [FormWizard] ValidationEngine created:", {
+        engine: !!i,
+        validateField: typeof i.validateField,
+        messageStyle: r.validationMessageStyle || "withLabel"
+      }), i;
+    }, [r.validationMessageStyle]), S = u(() => t ? {
+      ...t,
+      steps: t.steps.map((i) => {
+        const o = i;
+        return {
+          ...o,
+          schema: o.schema || p.getStepSchema(o)
+        };
+      })
+    } : null, [t, p]), F = E({
+      config: S || r,
+      // Fallback to original config if resolution fails
+      initialData: a,
+      onSubmit: y
+    });
+    return c ? /* @__PURE__ */ l("div", { className: g("form-wizard-error", n.errorState), children: [
+      /* @__PURE__ */ e("h3", { className: n.errorHeading, children: "Configuration Error" }),
+      /* @__PURE__ */ e("p", { children: c })
+    ] }) : t ? /* @__PURE__ */ e(W, { client: C, children: /* @__PURE__ */ e(j, { formId: r.id, children: /* @__PURE__ */ e(O, { children: /* @__PURE__ */ l(z.Provider, { value: F, children: [
+      /* @__PURE__ */ e(m, { componentName: "ActionManager", children: /* @__PURE__ */ e(M, {}) }),
+      /* @__PURE__ */ l(s, { className: n.formLayout, children: [
+        /* @__PURE__ */ e(s.Title, { children: /* @__PURE__ */ e(k, { level: 1, children: r.title }) }),
+        /* @__PURE__ */ e(s.LeftColumn, { children: /* @__PURE__ */ e(m, { componentName: "StepProgressIndicator", children: /* @__PURE__ */ e(T, {}) }) }),
+        /* @__PURE__ */ e(m, { componentName: "FormStep", children: /* @__PURE__ */ e(P, {}) })
+      ] })
+    ] }) }) }) }) : /* @__PURE__ */ e("div", { className: g("form-wizard-loading", n.loadingState), children: /* @__PURE__ */ e("div", { className: n.loadingPulse, children: "Loading form templates..." }) });
+  }
+);
+v.displayName = "FormWizardCore";
+const A = (r) => {
+  const a = U();
+  return /* @__PURE__ */ e(b, { config: a, children: /* @__PURE__ */ e(v, { ...r }) });
+};
+A.displayName = "FormWizard";
+export {
+  A as default
+};

package/wizard/src/features/form-runtime/FormWizard/FormWizard.module.css.js

@@ -0,0 +1,16 @@
+"use client";
+const o = "fb-errorState_khSRW", t = "fb-errorHeading_dGdN2", e = "fb-loadingState_Pdhds", r = "fb-loadingPulse_QIw08", a = "fb-formLayout_JzC8E", n = {
+  errorState: o,
+  errorHeading: t,
+  loadingState: e,
+  loadingPulse: r,
+  formLayout: a
+};
+export {
+  n as default,
+  t as errorHeading,
+  o as errorState,
+  a as formLayout,
+  r as loadingPulse,
+  e as loadingState
+};

package/wizard/src/features/form-runtime/components/FormField.js

@@ -0,0 +1,405 @@
+"use client";
+import { jsx as n, jsxs as p } from "react/jsx-runtime";
+import { useFormMachine as M } from "../../state-management/machines/useFormMachine.js";
+import { ComponentAlerts as F } from "../../trigger-action-system/components/ComponentAlert/ComponentAlert.js";
+/* empty css                               */
+import { memo as N, useMemo as x } from "react";
+import { adaptComponentForRegistry as _ } from "../ComponentAdapterComplete/ComponentAdapterComplete.js";
+import { useComponentTriggers as B } from "../hooks/useComponentTriggers.js";
+import { useComponentVisibility as H } from "../hooks/useComponentVisibility.js";
+import { useFieldEventHandlers as O } from "../hooks/useFieldEventHandlers.js";
+import { useFormContext as U } from "../hooks/useFormContext.js";
+import { useFormFieldState as G } from "../hooks/useFormFieldState.js";
+import { useValidationEvents as z } from "../hooks/useValidationEvents.js";
+import { checkHasIsDirtyTriggers as P, shouldBeFormField as j, checkFieldHasValue as q, getValidationDisplayState as J, shouldShowComponentAlerts as W, shouldShowDisplayMode as X } from "../utils/fieldHelpers.js";
+import { logger as e } from "../utils/logger.js";
+import { updateValidationCache as C } from "../utils/validationUX.js";
+import { ProgressLoaderRuntime as Z } from "./ProgressLoaderRuntime.js";
+import { DisplayModeRenderer as K } from "./renderers/DisplayModeRenderer/DisplayModeRenderer.js";
+import { InteractiveFieldRenderer as Q } from "./renderers/InteractiveFieldRenderer/InteractiveFieldRenderer.js";
+import Y from "../../../../../ui/src/lib/error-boundaries/ComponentErrorBoundary.js";
+const ii = N(
+  ({ component: i, readOnly: V = !1 }) => {
+    const [D, ai, g] = M(), c = U(), { isVisible: T } = H({
+      visibilityConditions: i.visibilityConditions,
+      formData: D.context.data
+    }), { forceShowValidation: A, resetValidationState: $ } = z({
+      componentId: i.id
+    }), y = P(i), { originalValueFromMachine: b, initializeField: R, getEnhancedIsDirty: S } = G({
+      componentId: i.id,
+      hasIsDirtyTriggers: y
+    }), { handleChange: L, handleBlur: k } = O({
+      componentId: i.id,
+      hasIsDirtyTriggers: y,
+      originalValueFromMachine: b,
+      getEnhancedIsDirty: S,
+      resetValidationState: $
+    }), f = B({
+      componentId: i.id
+    }), m = x(() => {
+      const a = g.validationEngine;
+      return e.debug(`ValidationEngine instance check for ${i.id}:`, {
+        validationEngine: !!a,
+        validationEngineType: typeof a,
+        hasValidateField: !!a?.validateField,
+        engineConstructor: a?.constructor?.name
+      }), ({ value: t }) => {
+        const l = `${i.id}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        try {
+          if (e.validation(
+            `VALIDATION START [${l}] for ${i.id}:`,
+            {
+              componentType: i.type,
+              componentId: i.id,
+              value: t,
+              valueType: typeof t,
+              valueLength: typeof t == "string" ? t.length : "N/A",
+              hasValidation: !!i.validation,
+              validationRules: i.validation,
+              validationEngineExists: !!a,
+              validatorCallId: l
+            }
+          ), !i.validation)
+            if (i.type === "email")
+              e.validation(
+                `Email component ${i.id} [${l}] has no explicit validation rules but will be validated for email format`
+              );
+            else {
+              e.validation(
+                `No validation rules for ${i.id} [${l}], returning VALID (undefined)`
+              ), C(i.id, !0);
+              return;
+            }
+          let s = t;
+          i.type === "radioGroup" && t === null && (s = "", e.debug(
+            `Normalized radio group null value to empty string for ${i.id} [${l}]`
+          )), e.validation(
+            `About to call ValidationEngine.validateField [${l}] for ${i.id}:`,
+            {
+              componentConfig: {
+                id: i.id,
+                type: i.type,
+                validation: i.validation
+              },
+              normalizedValue: s,
+              validationEngineMethod: typeof a.validateField
+            }
+          );
+          const d = a.validateField(
+            i,
+            s
+          );
+          e.validation(
+            `ValidationEngine.validateField result [${l}] for ${i.id}:`,
+            {
+              result: d,
+              resultType: typeof d,
+              resultIsValid: d?.isValid,
+              resultErrors: d?.errors,
+              resultValue: d?.value,
+              errorsLength: d?.errors?.length
+            }
+          );
+          const u = (d.errors || []).length === 0;
+          C(i.id, u);
+          let o;
+          return u ? o = void 0 : (d.errors || []).length === 1 ? o = (d.errors || [])[0] : o = d.errors || [], e.validation(
+            `VALIDATION END [${l}] for ${i.id}:`,
+            {
+              originalValue: t,
+              normalizedValue: s,
+              validationEngineResult: d,
+              isValidCalculated: u,
+              errors: d.errors,
+              hasValidationRules: !!i.validation,
+              returnValueToTanStack: o,
+              returnValueType: typeof o,
+              validatorCallId: l,
+              // 🚨 CRITICAL VALIDATION CHECK:
+              EXPECTED_BEHAVIOR: i.id === "username" && t === "dd" ? "Should be INVALID (length 2, minLength 3)" : "Normal validation",
+              ACTUAL_RESULT: u ? "VALID" : "INVALID",
+              CRITICAL_ISSUE_DETECTED: i.id === "username" && t === "dd" && u
+            }
+          ), i.id === "username" && t === "dd" && o === void 0 && e.critical(
+            `CRITICAL BUG DETECTED [${l}]: ValidationEngine incorrectly validated "dd" as VALID for username field!`,
+            {
+              value: "dd",
+              expectedLength: 3,
+              actualLength: 2,
+              validationRules: i.validation,
+              validationEngineResult: d,
+              schemaUsed: "Check ValidationEngine.getComponentSchema",
+              possibleCauses: [
+                "Schema generation error",
+                "ValidationEngine bug",
+                "Zod schema not properly created"
+              ]
+            }
+          ), o;
+        } catch (s) {
+          return e.error(
+            `Validation ERROR [${l}] for ${i.id}:`,
+            s
+          ), e.error(`ValidationEngine state [${l}]:`, {
+            validationEngine: !!a,
+            validateFieldMethod: typeof a?.validateField,
+            componentValidation: i.validation,
+            value: t
+          }), "Validation failed";
+        }
+      };
+    }, [i.validation, g.validationEngine, i]);
+    R(), e.lifecycle(`Component MOUNTED for ${i.id}:`, {
+      componentId: i.id,
+      componentType: i.type,
+      hasValidation: !!i.validation,
+      validationRules: i.validation,
+      validationEngineExists: !!g.validationEngine
+    });
+    const w = j(i);
+    if (i.validation && g.validationEngine)
+      try {
+        const a = g.validationEngine.validateField(
+          i,
+          ""
+        ), t = g.validationEngine.validateField(
+          i,
+          i.type === "radioGroup" ? "option-2" : "test"
+        );
+        e.test(`VALIDATION ENGINE TEST for ${i.id}:`, {
+          componentType: i.type,
+          hasValidation: !!i.validation,
+          emptyTest: {
+            isValid: a.isValid,
+            errors: a.errors
+          },
+          validTest: {
+            isValid: t.isValid,
+            errors: t.errors
+          }
+        });
+      } catch (a) {
+        e.error(
+          `ValidationEngine test failed for ${i.id}:`,
+          a
+        );
+      }
+    const I = !!(i.validation || i.required !== void 0);
+    return /* @__PURE__ */ n(
+      "div",
+      {
+        style: {
+          display: T ? "block" : "none"
+        },
+        "data-component-id": i.id,
+        "data-visible": T,
+        children: /* @__PURE__ */ n(
+          Y,
+          {
+            componentName: `FormField-${i.type}-${i.id}`,
+            children: w ? /* @__PURE__ */ n(
+              c.Field,
+              {
+                name: i.id,
+                validators: {
+                  onChange: m,
+                  onBlur: m
+                },
+                defaultMeta: {
+                  // VALIDATION UX FIX: Prevent fields from being marked as touched initially
+                  // This ensures validation errors don't show until user actually interacts with the field
+                  isTouched: !1
+                },
+                children: (a) => {
+                  const t = a.state.value, l = S(
+                    t,
+                    a.state.meta.isDirty
+                  );
+                  if (e.state(`TanStack Form field state for ${i.id}:`, {
+                    componentId: i.id,
+                    fieldValue: t,
+                    fieldValueType: typeof t,
+                    fieldMeta: {
+                      isValid: a.state.meta.isValid,
+                      isDirty: a.state.meta.isDirty,
+                      isTouched: a.state.meta.isTouched,
+                      errors: a.state.meta.errors
+                    },
+                    formCanSubmit: c.state.canSubmit,
+                    formIsValid: c.state.isValid
+                  }), i.validation)
+                    try {
+                      const r = m({
+                        value: t
+                      }), v = r === void 0 !== a.state.meta.isValid, E = {
+                        timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+                        componentId: i.id,
+                        currentFieldValue: t,
+                        fieldValueType: typeof t,
+                        validatorDirectResult: r,
+                        validatorDirectResultType: typeof r,
+                        tanStackFormIsValid: a.state.meta.isValid,
+                        tanStackFormErrors: a.state.meta.errors,
+                        tanStackFormErrorsLength: (a.state.meta.errors || []).length,
+                        validatorSaysValid: r === void 0,
+                        tanStackFormSaysValid: a.state.meta.isValid,
+                        MISMATCH: v,
+                        validationRules: i.validation,
+                        // Test specific values that are problematic
+                        ...t === "dd" && {
+                          SPECIFIC_DD_TEST: {
+                            description: 'Testing problematic "dd" value',
+                            validatorResult: r,
+                            tanStackResult: a.state.meta.isValid,
+                            CRITICAL_MISMATCH: r === void 0 !== a.state.meta.isValid,
+                            expectedBehavior: "Should be INVALID (length 2, min required 3)"
+                          }
+                        }
+                      };
+                      if (e.critical(
+                        `Validator vs TanStack Form mismatch test for ${i.id}:`,
+                        E
+                      ), typeof window < "u" && window.localStorage)
+                        try {
+                          const h = JSON.parse(
+                            window.localStorage.getItem(
+                              "validation_debug_logs"
+                            ) || "[]"
+                          );
+                          h.push(E), window.localStorage.setItem(
+                            "validation_debug_logs",
+                            JSON.stringify(h.slice(-50))
+                          );
+                        } catch (h) {
+                          console.warn(
+                            "Could not save debug logs to localStorage:",
+                            h
+                          );
+                        }
+                      if (v) {
+                        e.critical(
+                          `VALIDATION MISMATCH DETECTED for ${i.id}:`,
+                          {
+                            description: "Validator function and TanStack Form disagree on validation state",
+                            validatorSaysValid: r === void 0,
+                            tanStackSaysValid: a.state.meta.isValid,
+                            debugInfo: E,
+                            possibleCauses: [
+                              "Validator function return value not properly understood by TanStack Form",
+                              "Cached validation state in TanStack Form",
+                              "Validator function called with different value than TanStack Form has",
+                              "Multiple validators running with different logic",
+                              "TanStack Form validator configuration issue"
+                            ],
+                            nextSteps: [
+                              "Check TanStack Form validator configuration",
+                              "Verify return value format (undefined vs string/array)",
+                              "Check for validator caching issues",
+                              "Test validator function in isolation"
+                            ]
+                          }
+                        );
+                        try {
+                          e.debug(
+                            `Attempting to force revalidation for ${i.id}`
+                          ), a.handleChange(t);
+                        } catch (h) {
+                          e.error(
+                            "Failed to force revalidation:",
+                            h
+                          );
+                        }
+                      }
+                    } catch (r) {
+                      e.error(
+                        `Validator direct test FAILED for ${i.id}:`,
+                        r
+                      );
+                    }
+                  const s = q(t, i.type), d = X(
+                    V,
+                    s
+                  ), { isSubmitAttempted: u } = J(
+                    a.state.meta,
+                    c.state,
+                    A
+                  ), o = W(
+                    y,
+                    l,
+                    f.alerts.length
+                  );
+                  return d && I ? /* @__PURE__ */ p("div", { children: [
+                    /* @__PURE__ */ n(
+                      K,
+                      {
+                        component: i,
+                        fieldValue: t
+                      }
+                    ),
+                    o && f.alerts.length > 0 && /* @__PURE__ */ n(F, { alerts: f.alerts })
+                  ] }) : /* @__PURE__ */ p("div", { children: [
+                    /* @__PURE__ */ n(
+                      Q,
+                      {
+                        component: i,
+                        field: a,
+                        readOnly: V,
+                        needsFormFieldWrapper: I,
+                        isSubmitAttempted: u,
+                        onChange: (r) => {
+                          e.change(`onChange triggered for ${i.id}:`, {
+                            newValue: r,
+                            previousValue: t,
+                            valueType: typeof r
+                          });
+                          const v = Array.isArray(r) ? r.length > 0 ? r[0] : null : r;
+                          e.change(`Converted value for ${i.id}:`, {
+                            originalValue: r,
+                            sharedValue: v,
+                            sharedValueType: typeof v
+                          }), L(a)(v);
+                        },
+                        onBlur: k(a)
+                      }
+                    ),
+                    o && f.alerts.length > 0 && /* @__PURE__ */ n(F, { alerts: f.alerts })
+                  ] });
+                }
+              }
+            ) : i.type === "progress-loader" ? (
+              // Special handling for progress-loader: use runtime wrapper for auto-start
+              /* @__PURE__ */ n(
+                Z,
+                {
+                  properties: i.properties || {}
+                }
+              )
+            ) : (
+              // For display-only components, render directly without form.Field wrapper
+              _(
+                i,
+                null,
+                // no form value
+                () => {
+                },
+                // no onChange handler
+                V,
+                () => {
+                },
+                // no onBlur handler
+                void 0,
+                // no errors
+                void 0
+                // no state
+              )
+            )
+          }
+        )
+      }
+    );
+  }
+);
+ii.displayName = "FormField";
+export {
+  ii as default
+};