@fogpipe/forma-react 0.17.1 → 0.18.0

package/dist/chunk-5K4QITFH.js

@@ -0,0 +1,1276 @@
+// src/useForma.ts
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+import { isAdornableField } from "@fogpipe/forma-core";
+
+// src/events.ts
+var FormaEventEmitter = class {
+  listeners = /* @__PURE__ */ new Map();
+  /**
+   * Register a listener for an event. Returns an unsubscribe function.
+   */
+  on(event, listener) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, /* @__PURE__ */ new Set());
+    }
+    this.listeners.get(event).add(listener);
+    return () => {
+      const set = this.listeners.get(event);
+      if (set) {
+        set.delete(listener);
+        if (set.size === 0) {
+          this.listeners.delete(event);
+        }
+      }
+    };
+  }
+  /**
+   * Fire an event synchronously. Listener errors are caught and logged
+   * to prevent one listener from breaking others.
+   */
+  fire(event, payload) {
+    const set = this.listeners.get(event);
+    if (!set || set.size === 0) return;
+    for (const listener of set) {
+      try {
+        listener(payload);
+      } catch (error) {
+        console.error(`[forma] Error in "${event}" event listener:`, error);
+      }
+    }
+  }
+  /**
+   * Fire an event and await all async listeners sequentially.
+   * Used for preSubmit where handlers can be async.
+   */
+  async fireAsync(event, payload) {
+    const set = this.listeners.get(event);
+    if (!set || set.size === 0) return;
+    for (const listener of set) {
+      try {
+        await listener(payload);
+      } catch (error) {
+        console.error(`[forma] Error in "${event}" event listener:`, error);
+      }
+    }
+  }
+  /**
+   * Check if any listeners are registered for an event.
+   */
+  hasListeners(event) {
+    const set = this.listeners.get(event);
+    return set !== void 0 && set.size > 0;
+  }
+  /**
+   * Remove all listeners. Called on cleanup.
+   */
+  clear() {
+    this.listeners.clear();
+  }
+};
+
+// src/useForma.ts
+import {
+  getVisibility,
+  getRequired,
+  getEnabled,
+  getReadonly,
+  validate,
+  calculate,
+  getPageVisibility,
+  getOptionsVisibility
+} from "@fogpipe/forma-core";
+function formReducer(state, action) {
+  switch (action.type) {
+    case "SET_FIELD_VALUE":
+      return {
+        ...state,
+        data: { ...state.data, [action.field]: action.value },
+        isDirty: true,
+        isSubmitted: false
+        // Clear on data change
+      };
+    case "SET_FIELD_TOUCHED":
+      return {
+        ...state,
+        touched: { ...state.touched, [action.field]: action.touched }
+      };
+    case "SET_VALUES":
+      return {
+        ...state,
+        data: { ...state.data, ...action.values },
+        isDirty: true,
+        isSubmitted: false
+        // Clear on data change
+      };
+    case "SET_SUBMITTING":
+      return { ...state, isSubmitting: action.isSubmitting };
+    case "SET_SUBMITTED":
+      return { ...state, isSubmitted: action.isSubmitted };
+    case "SET_PAGE":
+      return { ...state, currentPage: action.page };
+    case "RESET":
+      return {
+        data: action.initialData,
+        touched: {},
+        isSubmitting: false,
+        isSubmitted: false,
+        isDirty: false,
+        currentPage: 0
+      };
+    default:
+      return state;
+  }
+}
+function getDefaultBooleanValues(spec) {
+  var _a;
+  const defaults = {};
+  for (const fieldPath of spec.fieldOrder) {
+    const schemaProperty = (_a = spec.schema.properties) == null ? void 0 : _a[fieldPath];
+    const fieldDef = spec.fields[fieldPath];
+    if ((schemaProperty == null ? void 0 : schemaProperty.type) === "boolean" || (fieldDef == null ? void 0 : fieldDef.type) === "boolean") {
+      defaults[fieldPath] = false;
+    }
+  }
+  return defaults;
+}
+function getFieldDefaults(spec) {
+  const defaults = {};
+  for (const [fieldPath, fieldDef] of Object.entries(spec.fields)) {
+    if (fieldDef.defaultValue !== void 0) {
+      defaults[fieldPath] = fieldDef.defaultValue;
+    }
+  }
+  return defaults;
+}
+function useForma(options) {
+  const {
+    spec: inputSpec,
+    initialData = {},
+    onSubmit,
+    onChange,
+    validateOn = "blur",
+    referenceData,
+    validationDebounceMs = 0,
+    on: onEvents
+  } = options;
+  const spec = useMemo(() => {
+    if (!referenceData) return inputSpec;
+    return {
+      ...inputSpec,
+      referenceData: {
+        ...inputSpec.referenceData,
+        ...referenceData
+      }
+    };
+  }, [inputSpec, referenceData]);
+  const [state, dispatch] = useReducer(formReducer, {
+    data: {
+      ...getDefaultBooleanValues(spec),
+      ...getFieldDefaults(spec),
+      ...initialData
+    },
+    touched: {},
+    isSubmitting: false,
+    isSubmitted: false,
+    isDirty: false,
+    currentPage: 0
+  });
+  const stateDataRef = useRef(state.data);
+  stateDataRef.current = state.data;
+  const hasInitialized = useRef(false);
+  const emitterRef = useRef(new FormaEventEmitter());
+  const onEventsRef = useRef(onEvents);
+  onEventsRef.current = onEvents;
+  const pendingEventsRef = useRef([]);
+  const isFiringEventsRef = useRef(false);
+  useEffect(() => {
+    const emitter = emitterRef.current;
+    return () => {
+      emitter.clear();
+    };
+  }, []);
+  const fireEvent = useCallback(
+    (event, payload) => {
+      var _a;
+      try {
+        const handler = (_a = onEventsRef.current) == null ? void 0 : _a[event];
+        if (handler) handler(payload);
+      } catch (error) {
+        console.error(`[forma] Error in "${event}" event handler:`, error);
+      }
+      emitterRef.current.fire(event, payload);
+    },
+    []
+  );
+  const computed = useMemo(
+    () => calculate(state.data, spec),
+    [state.data, spec]
+  );
+  const visibility = useMemo(
+    () => getVisibility(state.data, spec, { computed }),
+    [state.data, spec, computed]
+  );
+  const required = useMemo(
+    () => getRequired(state.data, spec, { computed }),
+    [state.data, spec, computed]
+  );
+  const enabled = useMemo(
+    () => getEnabled(state.data, spec, { computed }),
+    [state.data, spec, computed]
+  );
+  const readonly = useMemo(
+    () => getReadonly(state.data, spec, { computed }),
+    [state.data, spec, computed]
+  );
+  const optionsVisibility = useMemo(
+    () => getOptionsVisibility(state.data, spec, { computed }),
+    [state.data, spec, computed]
+  );
+  const immediateValidation = useMemo(
+    () => validate(state.data, spec, { computed, onlyVisible: true }),
+    [state.data, spec, computed]
+  );
+  const [debouncedValidation, setDebouncedValidation] = useState(immediateValidation);
+  useEffect(() => {
+    if (validationDebounceMs <= 0) {
+      setDebouncedValidation(immediateValidation);
+      return;
+    }
+    const timeoutId = setTimeout(() => {
+      setDebouncedValidation(immediateValidation);
+    }, validationDebounceMs);
+    return () => clearTimeout(timeoutId);
+  }, [immediateValidation, validationDebounceMs]);
+  const validation = validationDebounceMs > 0 ? debouncedValidation : immediateValidation;
+  useEffect(() => {
+    if (hasInitialized.current) {
+      onChange == null ? void 0 : onChange(state.data, computed);
+    } else {
+      hasInitialized.current = true;
+    }
+  }, [state.data, computed, onChange]);
+  const setNestedValue = useCallback(
+    (path, value) => {
+      const parts = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+      if (parts.length === 1) {
+        dispatch({ type: "SET_FIELD_VALUE", field: path, value });
+        return;
+      }
+      const buildNestedObject = (data, pathParts, val) => {
+        const result = { ...data };
+        let current = result;
+        for (let i = 0; i < pathParts.length - 1; i++) {
+          const part = pathParts[i];
+          const nextPart = pathParts[i + 1];
+          const isNextArrayIndex = /^\d+$/.test(nextPart);
+          if (current[part] === void 0) {
+            current[part] = isNextArrayIndex ? [] : {};
+          } else if (Array.isArray(current[part])) {
+            current[part] = [...current[part]];
+          } else {
+            current[part] = { ...current[part] };
+          }
+          current = current[part];
+        }
+        current[pathParts[pathParts.length - 1]] = val;
+        return result;
+      };
+      dispatch({
+        type: "SET_VALUES",
+        values: buildNestedObject(state.data, parts, value)
+      });
+    },
+    [state.data]
+  );
+  const getValueAtPath = useCallback((path) => {
+    const parts = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+    let value = stateDataRef.current;
+    for (const part of parts) {
+      if (value === null || value === void 0) return void 0;
+      value = value[part];
+    }
+    return value;
+  }, []);
+  const queueFieldChangedEvent = useCallback(
+    (path, value, source) => {
+      if (isFiringEventsRef.current) return;
+      const previousValue = getValueAtPath(path);
+      if (previousValue === value) return;
+      pendingEventsRef.current.push({
+        event: "fieldChanged",
+        payload: { path, value, previousValue, source }
+      });
+    },
+    [getValueAtPath]
+  );
+  const setFieldValue = useCallback(
+    (path, value) => {
+      queueFieldChangedEvent(path, value, "user");
+      setNestedValue(path, value);
+      if (validateOn === "change") {
+        dispatch({ type: "SET_FIELD_TOUCHED", field: path, touched: true });
+      }
+    },
+    [validateOn, setNestedValue, queueFieldChangedEvent]
+  );
+  const setFieldTouched = useCallback((path, touched = true) => {
+    dispatch({ type: "SET_FIELD_TOUCHED", field: path, touched });
+  }, []);
+  const setValues = useCallback(
+    (values) => {
+      for (const [key, value] of Object.entries(values)) {
+        queueFieldChangedEvent(key, value, "setValues");
+      }
+      dispatch({ type: "SET_VALUES", values });
+    },
+    [queueFieldChangedEvent]
+  );
+  const validateField = useCallback(
+    (path) => {
+      return validation.errors.filter((e) => e.field === path);
+    },
+    [validation]
+  );
+  const validateForm = useCallback(() => {
+    return validation;
+  }, [validation]);
+  const submitForm = useCallback(async () => {
+    var _a;
+    dispatch({ type: "SET_SUBMITTING", isSubmitting: true });
+    const submissionData = { ...state.data };
+    let postSubmitPayload;
+    try {
+      const preSubmitPayload = {
+        data: submissionData,
+        computed: { ...computed }
+      };
+      const declarativePreSubmit = (_a = onEventsRef.current) == null ? void 0 : _a.preSubmit;
+      if (declarativePreSubmit) {
+        await declarativePreSubmit(preSubmitPayload);
+      }
+      if (emitterRef.current.hasListeners("preSubmit")) {
+        await emitterRef.current.fireAsync("preSubmit", preSubmitPayload);
+      }
+      if (!immediateValidation.valid) {
+        postSubmitPayload = {
+          data: submissionData,
+          success: false,
+          validationErrors: immediateValidation.errors
+        };
+      } else if (onSubmit) {
+        try {
+          await onSubmit(submissionData);
+          postSubmitPayload = { data: submissionData, success: true };
+        } catch (error) {
+          postSubmitPayload = {
+            data: submissionData,
+            success: false,
+            error: error instanceof Error ? error : new Error(String(error))
+          };
+        }
+      } else {
+        postSubmitPayload = { data: submissionData, success: true };
+      }
+      dispatch({ type: "SET_SUBMITTED", isSubmitted: true });
+    } finally {
+      dispatch({ type: "SET_SUBMITTING", isSubmitting: false });
+      if (postSubmitPayload) {
+        fireEvent("postSubmit", postSubmitPayload);
+      }
+    }
+  }, [immediateValidation, onSubmit, state.data, computed, fireEvent]);
+  const resetForm = useCallback(() => {
+    const resetData = {
+      ...getDefaultBooleanValues(spec),
+      ...getFieldDefaults(spec),
+      ...initialData
+    };
+    if (!isFiringEventsRef.current) {
+      const currentData = stateDataRef.current;
+      const allKeys = /* @__PURE__ */ new Set([
+        ...Object.keys(currentData),
+        ...Object.keys(resetData)
+      ]);
+      for (const key of allKeys) {
+        const currentVal = currentData[key];
+        const resetVal = resetData[key];
+        if (currentVal !== resetVal) {
+          pendingEventsRef.current.push({
+            event: "fieldChanged",
+            payload: {
+              path: key,
+              value: resetVal,
+              previousValue: currentVal,
+              source: "reset"
+            }
+          });
+        }
+      }
+      pendingEventsRef.current.push({
+        event: "formReset",
+        payload: {}
+      });
+    }
+    dispatch({ type: "RESET", initialData: resetData });
+  }, [spec, initialData]);
+  const wizard = useMemo(() => {
+    if (!spec.pages || spec.pages.length === 0) return null;
+    const pageVisibility = getPageVisibility(state.data, spec, { computed });
+    const pages = spec.pages.map((p) => ({
+      id: p.id,
+      title: p.title,
+      description: p.description,
+      visible: pageVisibility[p.id] !== false,
+      fields: p.fields
+    }));
+    const visiblePages = pages.filter((p) => p.visible);
+    const maxPageIndex = Math.max(0, visiblePages.length - 1);
+    const clampedPageIndex = Math.min(
+      Math.max(0, state.currentPage),
+      maxPageIndex
+    );
+    if (clampedPageIndex !== state.currentPage && visiblePages.length > 0) {
+      dispatch({ type: "SET_PAGE", page: clampedPageIndex });
+    }
+    const currentPage = visiblePages[clampedPageIndex] || null;
+    const hasNextPage = clampedPageIndex < visiblePages.length - 1;
+    const hasPreviousPage = clampedPageIndex > 0;
+    const isLastPage = clampedPageIndex === visiblePages.length - 1;
+    const advanceToNextPage = () => {
+      if (hasNextPage) {
+        const toIndex = clampedPageIndex + 1;
+        dispatch({ type: "SET_PAGE", page: toIndex });
+        const newPage = visiblePages[toIndex];
+        if (newPage) {
+          fireEvent("pageChanged", {
+            fromIndex: clampedPageIndex,
+            toIndex,
+            page: newPage
+          });
+        }
+      }
+    };
+    return {
+      pages,
+      currentPageIndex: clampedPageIndex,
+      currentPage,
+      goToPage: (index) => {
+        const validIndex = Math.min(Math.max(0, index), maxPageIndex);
+        if (validIndex !== clampedPageIndex) {
+          dispatch({ type: "SET_PAGE", page: validIndex });
+          const newPage = visiblePages[validIndex];
+          if (newPage) {
+            fireEvent("pageChanged", {
+              fromIndex: clampedPageIndex,
+              toIndex: validIndex,
+              page: newPage
+            });
+          }
+        }
+      },
+      nextPage: advanceToNextPage,
+      previousPage: () => {
+        if (hasPreviousPage) {
+          const toIndex = clampedPageIndex - 1;
+          dispatch({ type: "SET_PAGE", page: toIndex });
+          const newPage = visiblePages[toIndex];
+          if (newPage) {
+            fireEvent("pageChanged", {
+              fromIndex: clampedPageIndex,
+              toIndex,
+              page: newPage
+            });
+          }
+        }
+      },
+      // Same function as nextPage — exposed as a separate name so consumers can
+      // bind a single "Next" button without risk of accidentally triggering submission.
+      // nextPage is already a no-op on the last page.
+      handleNext: advanceToNextPage,
+      hasNextPage,
+      hasPreviousPage,
+      canProceed: (() => {
+        if (!currentPage) return true;
+        const pageErrors = validation.errors.filter((e) => {
+          const isOnCurrentPage = currentPage.fields.includes(e.field) || currentPage.fields.some((f) => e.field.startsWith(`${f}[`));
+          const isVisible = visibility[e.field] !== false;
+          const isError = e.severity === "error";
+          return isOnCurrentPage && isVisible && isError;
+        });
+        return pageErrors.length === 0;
+      })(),
+      isLastPage,
+      touchCurrentPageFields: () => {
+        if (currentPage) {
+          currentPage.fields.forEach((field) => {
+            dispatch({ type: "SET_FIELD_TOUCHED", field, touched: true });
+          });
+        }
+      },
+      validateCurrentPage: () => {
+        if (!currentPage) return true;
+        const pageErrors = validation.errors.filter(
+          (e) => currentPage.fields.includes(e.field)
+        );
+        return pageErrors.length === 0;
+      }
+    };
+  }, [
+    spec,
+    state.data,
+    state.currentPage,
+    computed,
+    validation,
+    visibility,
+    fireEvent
+  ]);
+  useEffect(() => {
+    const events = pendingEventsRef.current;
+    if (events.length === 0) return;
+    pendingEventsRef.current = [];
+    isFiringEventsRef.current = true;
+    try {
+      for (const pending of events) {
+        fireEvent(
+          pending.event,
+          pending.payload
+        );
+      }
+    } finally {
+      isFiringEventsRef.current = false;
+    }
+  });
+  const setValueAtPath = useCallback(
+    (path, value) => {
+      queueFieldChangedEvent(path, value, "user");
+      const parts = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+      if (parts.length === 1) {
+        dispatch({ type: "SET_FIELD_VALUE", field: path, value });
+        return;
+      }
+      const newData = { ...stateDataRef.current };
+      let current = newData;
+      for (let i = 0; i < parts.length - 1; i++) {
+        const part = parts[i];
+        const nextPart = parts[i + 1];
+        const isNextArrayIndex = /^\d+$/.test(nextPart);
+        if (current[part] === void 0) {
+          current[part] = isNextArrayIndex ? [] : {};
+        } else if (Array.isArray(current[part])) {
+          current[part] = [...current[part]];
+        } else {
+          current[part] = { ...current[part] };
+        }
+        current = current[part];
+      }
+      current[parts[parts.length - 1]] = value;
+      dispatch({ type: "SET_VALUES", values: newData });
+    },
+    [queueFieldChangedEvent]
+  );
+  const fieldHandlers = useRef(/* @__PURE__ */ new Map());
+  useEffect(() => {
+    const validFields = new Set(spec.fieldOrder);
+    for (const fieldId of spec.fieldOrder) {
+      const fieldDef = spec.fields[fieldId];
+      if ((fieldDef == null ? void 0 : fieldDef.type) === "array" && fieldDef.itemFields) {
+        for (const key of fieldHandlers.current.keys()) {
+          if (key.startsWith(`${fieldId}[`)) {
+            validFields.add(key);
+          }
+        }
+      }
+    }
+    for (const key of fieldHandlers.current.keys()) {
+      const baseField = key.split("[")[0];
+      if (!validFields.has(key) && !validFields.has(baseField)) {
+        fieldHandlers.current.delete(key);
+      }
+    }
+  }, [spec]);
+  const getFieldHandlers = useCallback(
+    (path) => {
+      if (!fieldHandlers.current.has(path)) {
+        fieldHandlers.current.set(path, {
+          onChange: (value) => setValueAtPath(path, value),
+          onBlur: () => setFieldTouched(path)
+        });
+      }
+      return fieldHandlers.current.get(path);
+    },
+    [setValueAtPath, setFieldTouched]
+  );
+  const getFieldProps = useCallback(
+    (path) => {
+      var _a;
+      const fieldDef = spec.fields[path];
+      const handlers = getFieldHandlers(path);
+      let fieldType = (fieldDef == null ? void 0 : fieldDef.type) || "text";
+      if (!fieldType || fieldType === "computed") {
+        const schemaProperty2 = spec.schema.properties[path];
+        if (schemaProperty2) {
+          if (schemaProperty2.type === "number") fieldType = "number";
+          else if (schemaProperty2.type === "integer") fieldType = "integer";
+          else if (schemaProperty2.type === "boolean") fieldType = "boolean";
+          else if (schemaProperty2.type === "array") fieldType = "array";
+          else if (schemaProperty2.type === "object") fieldType = "object";
+          else if ("enum" in schemaProperty2 && schemaProperty2.enum)
+            fieldType = "select";
+          else if ("format" in schemaProperty2) {
+            if (schemaProperty2.format === "date") fieldType = "date";
+            else if (schemaProperty2.format === "date-time")
+              fieldType = "datetime";
+            else if (schemaProperty2.format === "email") fieldType = "email";
+            else if (schemaProperty2.format === "uri") fieldType = "url";
+          }
+        }
+      }
+      const fieldErrors = validation.errors.filter((e) => e.field === path);
+      const isTouched = state.touched[path] ?? false;
+      const shouldShowErrors = validateOn === "change" || validateOn === "blur" && isTouched || state.isSubmitted;
+      const visibleFieldErrors = shouldShowErrors ? fieldErrors : [];
+      const hasVisibleErrors = visibleFieldErrors.length > 0;
+      const isRequired = required[path] ?? false;
+      const schemaProperty = spec.schema.properties[path];
+      const isBooleanField = (schemaProperty == null ? void 0 : schemaProperty.type) === "boolean" || (fieldDef == null ? void 0 : fieldDef.type) === "boolean";
+      const hasValidationRules = (((_a = fieldDef == null ? void 0 : fieldDef.validations) == null ? void 0 : _a.length) ?? 0) > 0;
+      const showRequiredIndicator = isRequired && (!isBooleanField || hasValidationRules);
+      const adornerProps = fieldDef && isAdornableField(fieldDef) ? { prefix: fieldDef.prefix, suffix: fieldDef.suffix } : {};
+      return {
+        name: path,
+        value: getValueAtPath(path),
+        type: fieldType,
+        label: (fieldDef == null ? void 0 : fieldDef.label) || path.charAt(0).toUpperCase() + path.slice(1),
+        description: fieldDef == null ? void 0 : fieldDef.description,
+        placeholder: fieldDef == null ? void 0 : fieldDef.placeholder,
+        visible: visibility[path] !== false,
+        enabled: enabled[path] !== false,
+        readonly: readonly[path] ?? false,
+        required: isRequired,
+        showRequiredIndicator,
+        touched: isTouched,
+        errors: fieldErrors,
+        visibleErrors: visibleFieldErrors,
+        onChange: handlers.onChange,
+        onBlur: handlers.onBlur,
+        // ARIA accessibility attributes (driven by visibleErrors, not all errors)
+        "aria-invalid": hasVisibleErrors || void 0,
+        "aria-describedby": hasVisibleErrors ? `${path}-error` : void 0,
+        "aria-required": isRequired || void 0,
+        // Adorner props (only for adornable field types)
+        ...adornerProps,
+        // Presentation variant
+        variant: fieldDef == null ? void 0 : fieldDef.variant,
+        variantConfig: fieldDef == null ? void 0 : fieldDef.variantConfig
+      };
+    },
+    [
+      spec,
+      state.touched,
+      state.isSubmitted,
+      visibility,
+      enabled,
+      readonly,
+      required,
+      validation.errors,
+      validateOn,
+      getValueAtPath,
+      getFieldHandlers
+    ]
+  );
+  const getSelectFieldProps = useCallback(
+    (path) => {
+      const baseProps = getFieldProps(path);
+      const visibleOptions = optionsVisibility[path] ?? [];
+      return {
+        ...baseProps,
+        options: visibleOptions
+      };
+    },
+    [getFieldProps, optionsVisibility]
+  );
+  const getArrayHelpers = useCallback(
+    (path) => {
+      const fieldDef = spec.fields[path];
+      const currentValue = getValueAtPath(path) ?? [];
+      const arrayDef = (fieldDef == null ? void 0 : fieldDef.type) === "array" ? fieldDef : void 0;
+      const minItems = (arrayDef == null ? void 0 : arrayDef.minItems) ?? 0;
+      const maxItems = (arrayDef == null ? void 0 : arrayDef.maxItems) ?? Infinity;
+      const canAdd = currentValue.length < maxItems;
+      const canRemove = currentValue.length > minItems;
+      const getItemFieldProps = (index, fieldName) => {
+        var _a;
+        const itemPath = `${path}[${index}].${fieldName}`;
+        const itemFieldDef = (_a = arrayDef == null ? void 0 : arrayDef.itemFields) == null ? void 0 : _a[fieldName];
+        const handlers = getFieldHandlers(itemPath);
+        const item = currentValue[index] ?? {};
+        const itemValue = item[fieldName];
+        const fieldErrors = validation.errors.filter(
+          (e) => e.field === itemPath
+        );
+        const isTouched = state.touched[itemPath] ?? false;
+        const showErrors = validateOn === "change" || validateOn === "blur" && isTouched || state.isSubmitted;
+        const visibleOptions = optionsVisibility[itemPath];
+        return {
+          name: itemPath,
+          value: itemValue,
+          type: (itemFieldDef == null ? void 0 : itemFieldDef.type) || "text",
+          label: (itemFieldDef == null ? void 0 : itemFieldDef.label) || fieldName.charAt(0).toUpperCase() + fieldName.slice(1),
+          description: itemFieldDef == null ? void 0 : itemFieldDef.description,
+          placeholder: itemFieldDef == null ? void 0 : itemFieldDef.placeholder,
+          visible: true,
+          enabled: enabled[path] !== false,
+          readonly: readonly[itemPath] ?? false,
+          required: false,
+          // TODO: Evaluate item field required
+          showRequiredIndicator: false,
+          // Item fields don't show required indicator
+          touched: isTouched,
+          errors: fieldErrors,
+          visibleErrors: showErrors ? fieldErrors : [],
+          onChange: handlers.onChange,
+          onBlur: handlers.onBlur,
+          options: visibleOptions
+        };
+      };
+      return {
+        items: currentValue,
+        push: (item) => {
+          if (canAdd) {
+            setValueAtPath(path, [...currentValue, item]);
+          }
+        },
+        remove: (index) => {
+          if (canRemove) {
+            const newArray = [...currentValue];
+            newArray.splice(index, 1);
+            setValueAtPath(path, newArray);
+          }
+        },
+        move: (from, to) => {
+          const newArray = [...currentValue];
+          const [item] = newArray.splice(from, 1);
+          newArray.splice(to, 0, item);
+          setValueAtPath(path, newArray);
+        },
+        swap: (indexA, indexB) => {
+          const newArray = [...currentValue];
+          [newArray[indexA], newArray[indexB]] = [
+            newArray[indexB],
+            newArray[indexA]
+          ];
+          setValueAtPath(path, newArray);
+        },
+        insert: (index, item) => {
+          if (canAdd) {
+            const newArray = [...currentValue];
+            newArray.splice(index, 0, item);
+            setValueAtPath(path, newArray);
+          }
+        },
+        getItemFieldProps,
+        minItems,
+        maxItems,
+        canAdd,
+        canRemove
+      };
+    },
+    [
+      spec.fields,
+      getValueAtPath,
+      setValueAtPath,
+      getFieldHandlers,
+      enabled,
+      readonly,
+      state.touched,
+      state.isSubmitted,
+      validation.errors,
+      validateOn,
+      optionsVisibility
+    ]
+  );
+  const on = useCallback(
+    (event, listener) => emitterRef.current.on(event, listener),
+    []
+  );
+  return useMemo(
+    () => ({
+      data: state.data,
+      computed,
+      visibility,
+      required,
+      enabled,
+      readonly,
+      optionsVisibility,
+      touched: state.touched,
+      errors: validation.errors,
+      isValid: validation.valid,
+      isSubmitting: state.isSubmitting,
+      isSubmitted: state.isSubmitted,
+      isDirty: state.isDirty,
+      spec,
+      wizard,
+      setFieldValue,
+      setFieldTouched,
+      setValues,
+      validateField,
+      validateForm,
+      submitForm,
+      resetForm,
+      on,
+      getFieldProps,
+      getSelectFieldProps,
+      getArrayHelpers
+    }),
+    [
+      state.data,
+      state.touched,
+      state.isSubmitting,
+      state.isSubmitted,
+      state.isDirty,
+      computed,
+      visibility,
+      required,
+      enabled,
+      readonly,
+      optionsVisibility,
+      validation.errors,
+      validation.valid,
+      spec,
+      wizard,
+      setFieldValue,
+      setFieldTouched,
+      setValues,
+      validateField,
+      validateForm,
+      submitForm,
+      resetForm,
+      on,
+      getFieldProps,
+      getSelectFieldProps,
+      getArrayHelpers
+    ]
+  );
+}
+
+// src/context.ts
+import { createContext, useContext } from "react";
+var FormaContext = createContext(null);
+function useFormaContext() {
+  const context = useContext(FormaContext);
+  if (!context) {
+    throw new Error(
+      "useFormaContext must be used within a FormaContext.Provider"
+    );
+  }
+  return context;
+}
+
+// src/FormRenderer.tsx
+import React, {
+  forwardRef,
+  useImperativeHandle,
+  useRef as useRef2,
+  useMemo as useMemo2,
+  useCallback as useCallback2
+} from "react";
+import { isAdornableField as isAdornableField2, isSelectionField } from "@fogpipe/forma-core";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DefaultLayout({ children, onSubmit, isSubmitting }) {
+  return /* @__PURE__ */ jsxs("form", { onSubmit, children: [
+    children,
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled: isSubmitting, children: isSubmitting ? "Submitting..." : "Submit" })
+  ] });
+}
+function DefaultFieldWrapper({
+  fieldPath,
+  field,
+  children,
+  errors,
+  showRequiredIndicator,
+  visible
+}) {
+  if (!visible) return null;
+  const errorId = `${fieldPath}-error`;
+  const descriptionId = field.description ? `${fieldPath}-description` : void 0;
+  const hasErrors = errors.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: "field-wrapper", "data-field-path": fieldPath, children: [
+    field.label && /* @__PURE__ */ jsxs("label", { htmlFor: fieldPath, children: [
+      field.label,
+      showRequiredIndicator && /* @__PURE__ */ jsx("span", { className: "required", "aria-hidden": "true", children: "*" }),
+      showRequiredIndicator && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (required)" })
+    ] }),
+    children,
+    hasErrors && /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: errorId,
+        className: "field-errors",
+        role: "alert",
+        "aria-live": "polite",
+        children: errors.map((error, i) => /* @__PURE__ */ jsx("span", { className: "error", children: error.message }, i))
+      }
+    ),
+    field.description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "field-description", children: field.description })
+  ] });
+}
+function DefaultPageWrapper({
+  title,
+  description,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "page-wrapper", children: [
+    /* @__PURE__ */ jsx("h2", { children: title }),
+    description && /* @__PURE__ */ jsx("p", { children: description }),
+    children
+  ] });
+}
+function getNumberConstraints(schema) {
+  if (!schema) return {};
+  if (schema.type !== "number" && schema.type !== "integer") return {};
+  const min = "minimum" in schema && typeof schema.minimum === "number" ? schema.minimum : void 0;
+  const max = "maximum" in schema && typeof schema.maximum === "number" ? schema.maximum : void 0;
+  let step;
+  if ("multipleOf" in schema && typeof schema.multipleOf === "number") {
+    step = schema.multipleOf;
+  } else if (schema.type === "integer") {
+    step = 1;
+  }
+  return { min, max, step };
+}
+function createDefaultItem(itemFields) {
+  const item = {};
+  for (const [fieldName, fieldDef] of Object.entries(itemFields)) {
+    if (fieldDef.defaultValue !== void 0) {
+      item[fieldName] = fieldDef.defaultValue;
+    } else if (fieldDef.type === "boolean") {
+      item[fieldName] = false;
+    } else if (fieldDef.type === "number" || fieldDef.type === "integer") {
+      item[fieldName] = null;
+    } else {
+      item[fieldName] = "";
+    }
+  }
+  return item;
+}
+var FormRenderer = forwardRef(
+  function FormRenderer2(props, ref) {
+    const {
+      spec,
+      initialData,
+      onSubmit,
+      onChange,
+      components,
+      layout: Layout = DefaultLayout,
+      fieldWrapper: FieldWrapper = DefaultFieldWrapper,
+      pageWrapper: PageWrapper = DefaultPageWrapper,
+      validateOn = "blur"
+    } = props;
+    const forma = useForma({
+      spec,
+      initialData,
+      onSubmit,
+      onChange,
+      validateOn
+    });
+    const fieldRefs = useRef2(/* @__PURE__ */ new Map());
+    const focusField = useCallback2((path) => {
+      const element = fieldRefs.current.get(path);
+      element == null ? void 0 : element.focus();
+    }, []);
+    const focusFirstError = useCallback2(() => {
+      const firstError = forma.errors[0];
+      if (firstError) {
+        focusField(firstError.field);
+      }
+    }, [forma.errors, focusField]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        submitForm: forma.submitForm,
+        resetForm: forma.resetForm,
+        validateForm: forma.validateForm,
+        focusField,
+        focusFirstError,
+        getValues: () => forma.data,
+        setValues: forma.setValues,
+        isValid: forma.isValid,
+        isDirty: forma.isDirty
+      }),
+      [forma, focusField, focusFirstError]
+    );
+    const {
+      data: formaData,
+      computed: formaComputed,
+      visibility: formaVisibility,
+      required: formaRequired,
+      enabled: formaEnabled,
+      readonly: formaReadonly,
+      optionsVisibility: formaOptionsVisibility,
+      touched: formaTouched,
+      errors: formaErrors,
+      isSubmitted: formaIsSubmitted,
+      setFieldValue,
+      setFieldTouched,
+      getArrayHelpers
+    } = forma;
+    const fieldsToRender = useMemo2(() => {
+      var _a;
+      if (spec.pages && spec.pages.length > 0 && forma.wizard) {
+        const currentPage = forma.wizard.currentPage;
+        if (currentPage) {
+          return currentPage.fields;
+        }
+        return ((_a = spec.pages[0]) == null ? void 0 : _a.fields) ?? [];
+      }
+      return spec.fieldOrder;
+    }, [spec.pages, spec.fieldOrder, forma.wizard]);
+    const renderField = useCallback2(
+      (fieldPath) => {
+        var _a;
+        const fieldDef = spec.fields[fieldPath];
+        if (!fieldDef) return null;
+        const isVisible = formaVisibility[fieldPath] !== false;
+        if (!isVisible) {
+          return /* @__PURE__ */ jsx("div", { "data-field-path": fieldPath, hidden: true }, fieldPath);
+        }
+        const fieldType = fieldDef.type;
+        const componentKey = fieldType;
+        const Component = components[componentKey] || components.fallback;
+        if (!Component) {
+          console.warn(`No component found for field type: ${fieldType}`);
+          return null;
+        }
+        const errors = formaErrors.filter((e) => e.field === fieldPath);
+        const touched = formaTouched[fieldPath] ?? false;
+        const showErrors = validateOn === "change" || validateOn === "blur" && touched || formaIsSubmitted;
+        const visibleErrors = showErrors ? errors : [];
+        const required = formaRequired[fieldPath] ?? false;
+        const disabled = formaEnabled[fieldPath] === false;
+        const schemaProperty = spec.schema.properties[fieldPath];
+        const isBooleanField = (schemaProperty == null ? void 0 : schemaProperty.type) === "boolean" || (fieldDef == null ? void 0 : fieldDef.type) === "boolean";
+        const hasValidationRules = (((_a = fieldDef == null ? void 0 : fieldDef.validations) == null ? void 0 : _a.length) ?? 0) > 0;
+        const showRequiredIndicator = required && (!isBooleanField || hasValidationRules);
+        const isReadonly = formaReadonly[fieldPath] ?? false;
+        const baseProps = {
+          name: fieldPath,
+          field: fieldDef,
+          value: formaData[fieldPath],
+          touched,
+          required,
+          disabled,
+          errors,
+          visibleErrors,
+          onChange: (value) => setFieldValue(fieldPath, value),
+          onBlur: () => setFieldTouched(fieldPath),
+          // Convenience properties
+          visible: true,
+          // Always true since we already filtered for visibility
+          enabled: !disabled,
+          readonly: isReadonly,
+          label: fieldDef.label ?? fieldPath,
+          description: fieldDef.description,
+          placeholder: fieldDef.placeholder,
+          // Adorner properties (only for adornable field types)
+          ...isAdornableField2(fieldDef) && {
+            prefix: fieldDef.prefix,
+            suffix: fieldDef.suffix
+          },
+          // Presentation variant
+          variant: fieldDef.variant,
+          variantConfig: fieldDef.variantConfig
+        };
+        let fieldProps = baseProps;
+        if (fieldType === "number" || fieldType === "integer") {
+          const constraints = getNumberConstraints(schemaProperty);
+          fieldProps = {
+            ...baseProps,
+            fieldType,
+            value: baseProps.value,
+            onChange: baseProps.onChange,
+            ...constraints
+          };
+        } else if (fieldType === "select" || fieldType === "multiselect") {
+          const selectOptions = isSelectionField(fieldDef) ? fieldDef.options : [];
+          fieldProps = {
+            ...baseProps,
+            fieldType,
+            value: baseProps.value,
+            onChange: baseProps.onChange,
+            options: formaOptionsVisibility[fieldPath] ?? selectOptions ?? []
+          };
+        } else if (fieldType === "array" && fieldDef.type === "array" && fieldDef.itemFields) {
+          const arrayValue = Array.isArray(baseProps.value) ? baseProps.value : [];
+          const minItems = fieldDef.minItems ?? 0;
+          const maxItems = fieldDef.maxItems ?? Infinity;
+          const itemFieldDefs = fieldDef.itemFields;
+          const baseHelpers = getArrayHelpers(fieldPath);
+          const pushWithDefault = (item) => {
+            const newItem = item ?? createDefaultItem(itemFieldDefs);
+            baseHelpers.push(newItem);
+          };
+          const getItemFieldPropsExtended = (index, fieldName) => {
+            const baseProps2 = baseHelpers.getItemFieldProps(index, fieldName);
+            const itemFieldDef = itemFieldDefs[fieldName];
+            const itemPath = `${fieldPath}[${index}].${fieldName}`;
+            return {
+              ...baseProps2,
+              itemIndex: index,
+              fieldName,
+              options: formaOptionsVisibility[itemPath] ?? (itemFieldDef && isSelectionField(itemFieldDef) ? itemFieldDef.options : void 0)
+            };
+          };
+          const helpers = {
+            items: arrayValue,
+            push: pushWithDefault,
+            insert: baseHelpers.insert,
+            remove: baseHelpers.remove,
+            move: baseHelpers.move,
+            swap: baseHelpers.swap,
+            getItemFieldProps: getItemFieldPropsExtended,
+            minItems,
+            maxItems,
+            canAdd: arrayValue.length < maxItems,
+            canRemove: arrayValue.length > minItems
+          };
+          fieldProps = {
+            ...baseProps,
+            fieldType: "array",
+            value: arrayValue,
+            onChange: baseProps.onChange,
+            helpers,
+            itemFields: itemFieldDefs,
+            itemFieldOrder: fieldDef.itemFieldOrder,
+            minItems,
+            maxItems
+          };
+        } else if (fieldType === "matrix" && fieldDef.type === "matrix") {
+          const matrixValue = baseProps.value ?? null;
+          const rows = fieldDef.rows.map((row) => ({
+            id: row.id,
+            label: row.label,
+            visible: formaVisibility[`${fieldPath}.${row.id}`] !== false
+          }));
+          fieldProps = {
+            ...baseProps,
+            fieldType: "matrix",
+            value: matrixValue,
+            onChange: baseProps.onChange,
+            rows,
+            columns: fieldDef.columns,
+            multiSelect: fieldDef.multiSelect ?? false
+          };
+        } else if (fieldType === "display" && fieldDef.type === "display") {
+          const sourceValue = fieldDef.source ? formaData[fieldDef.source] ?? formaComputed[fieldDef.source] : void 0;
+          const {
+            onChange: _onChange,
+            value: _value,
+            ...displayBaseProps
+          } = baseProps;
+          fieldProps = {
+            ...displayBaseProps,
+            fieldType: "display",
+            content: fieldDef.content,
+            sourceValue,
+            format: fieldDef.format
+          };
+        } else {
+          fieldProps = {
+            ...baseProps,
+            fieldType,
+            value: baseProps.value ?? "",
+            onChange: baseProps.onChange
+          };
+        }
+        const componentProps = { field: fieldProps, spec };
+        return /* @__PURE__ */ jsx("div", { "data-field-path": fieldPath, children: /* @__PURE__ */ jsx(
+          FieldWrapper,
+          {
+            fieldPath,
+            field: fieldDef,
+            errors,
+            touched,
+            required,
+            showRequiredIndicator,
+            visible: isVisible,
+            children: React.createElement(
+              Component,
+              componentProps
+            )
+          }
+        ) }, fieldPath);
+      },
+      [
+        spec,
+        components,
+        FieldWrapper,
+        formaData,
+        formaComputed,
+        formaVisibility,
+        formaRequired,
+        formaEnabled,
+        formaReadonly,
+        formaOptionsVisibility,
+        formaTouched,
+        formaErrors,
+        formaIsSubmitted,
+        validateOn,
+        setFieldValue,
+        setFieldTouched,
+        getArrayHelpers
+      ]
+    );
+    const renderedFields = useMemo2(
+      () => fieldsToRender.map(renderField),
+      [fieldsToRender, renderField]
+    );
+    const content = useMemo2(() => {
+      if (spec.pages && spec.pages.length > 0 && forma.wizard) {
+        const currentPage = forma.wizard.currentPage;
+        if (!currentPage) return null;
+        return /* @__PURE__ */ jsx(
+          PageWrapper,
+          {
+            title: currentPage.title,
+            description: currentPage.description,
+            pageIndex: forma.wizard.currentPageIndex,
+            totalPages: forma.wizard.pages.length,
+            children: renderedFields
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(Fragment, { children: renderedFields });
+    }, [spec.pages, forma.wizard, PageWrapper, renderedFields]);
+    const handleSubmit = useCallback2(
+      (e) => {
+        e == null ? void 0 : e.preventDefault();
+        forma.submitForm();
+      },
+      [forma.submitForm]
+    );
+    return /* @__PURE__ */ jsx(FormaContext.Provider, { value: forma, children: /* @__PURE__ */ jsx(
+      Layout,
+      {
+        onSubmit: handleSubmit,
+        isSubmitting: forma.isSubmitting,
+        isValid: forma.isValid,
+        children: content
+      }
+    ) });
+  }
+);
+
+export {
+  useForma,
+  FormaContext,
+  useFormaContext,
+  FormRenderer
+};
+//# sourceMappingURL=chunk-5K4QITFH.js.map