@fogpipe/forma-react 0.17.0 → 0.18.0

package/dist/index.js

@@ -1,933 +1,14 @@
-// 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;
-    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: () => {
-        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
-            });
-          }
-        }
-      },
-      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
-            });
-          }
-        }
-      },
-      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 showErrors = validateOn === "change" || validateOn === "blur" && isTouched || state.isSubmitted;
-      const displayedErrors = showErrors ? fieldErrors : [];
-      const hasErrors = displayedErrors.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: displayedErrors,
-        onChange: handlers.onChange,
-        onBlur: handlers.onBlur,
-        // ARIA accessibility attributes
-        "aria-invalid": hasErrors || void 0,
-        "aria-describedby": hasErrors ? `${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: 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/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";
-
-// 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;
-}
+  FormRenderer,
+  FormaContext,
+  useForma,
+  useFormaContext
+} from "./chunk-5K4QITFH.js";
 
-// src/FormRenderer.tsx
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function DefaultLayout({ children, onSubmit, isSubmitting }) {
-  return /* @__PURE__ */ jsxs(
-    "form",
-    {
-      onSubmit: (e) => {
-        e.preventDefault();
-        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
-  ] });
-}
+// src/FieldRenderer.tsx
+import React from "react";
+import { isAdornableField } from "@fogpipe/forma-core";
+import { jsx } from "react/jsx-runtime";
 function getNumberConstraints(schema) {
   if (!schema) return {};
   if (schema.type !== "number" && schema.type !== "integer") return {};
@@ -956,332 +37,6 @@ function createDefaultItem(itemFields) {
   }
   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
-    } = 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,
-      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 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,
-          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,
-        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]);
-    return /* @__PURE__ */ jsx(FormaContext.Provider, { value: forma, children: /* @__PURE__ */ jsx(
-      Layout,
-      {
-        onSubmit: forma.submitForm,
-        isSubmitting: forma.isSubmitting,
-        isValid: forma.isValid,
-        children: content
-      }
-    ) });
-  }
-);
-
-// src/FieldRenderer.tsx
-import React2 from "react";
-import { isAdornableField as isAdornableField3 } from "@fogpipe/forma-core";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function getNumberConstraints2(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 createDefaultItem2(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;
-}
 function FieldRenderer({
   fieldPath,
   components,
@@ -1296,7 +51,7 @@ function FieldRenderer({
   }
   const isVisible = forma.visibility[fieldPath] !== false;
   if (!isVisible) {
-    return /* @__PURE__ */ jsx2("div", { "data-field-path": fieldPath, hidden: true });
+    return /* @__PURE__ */ jsx("div", { "data-field-path": fieldPath, hidden: true });
   }
   const fieldType = fieldDef.type;
   const componentKey = fieldType;
@@ -1307,6 +62,7 @@ function FieldRenderer({
   }
   const errors = forma.errors.filter((e) => e.field === fieldPath);
   const touched = forma.touched[fieldPath] ?? false;
+  const visibleErrors = touched || forma.isSubmitted ? errors : [];
   const required = forma.required[fieldPath] ?? false;
   const disabled = forma.enabled[fieldPath] === false;
   const schemaProperty = spec.schema.properties[fieldPath];
@@ -1319,6 +75,7 @@ function FieldRenderer({
     required,
     disabled,
     errors,
+    visibleErrors,
     onChange: (value) => forma.setFieldValue(fieldPath, value),
     onBlur: () => forma.setFieldTouched(fieldPath),
     // Convenience properties
@@ -1330,7 +87,7 @@ function FieldRenderer({
     description: fieldDef.description,
     placeholder: fieldDef.placeholder,
     // Adorner properties (only for adornable field types)
-    ...isAdornableField3(fieldDef) && {
+    ...isAdornableField(fieldDef) && {
       prefix: fieldDef.prefix,
       suffix: fieldDef.suffix
     },
@@ -1340,7 +97,7 @@ function FieldRenderer({
   };
   let fieldProps = baseProps;
   if (fieldType === "number") {
-    const constraints = getNumberConstraints2(schemaProperty);
+    const constraints = getNumberConstraints(schemaProperty);
     fieldProps = {
       ...baseProps,
       fieldType: "number",
@@ -1349,7 +106,7 @@ function FieldRenderer({
       ...constraints
     };
   } else if (fieldType === "integer") {
-    const constraints = getNumberConstraints2(schemaProperty);
+    const constraints = getNumberConstraints(schemaProperty);
     fieldProps = {
       ...baseProps,
       fieldType: "integer",
@@ -1384,7 +141,7 @@ function FieldRenderer({
     const helpers = {
       items: arrayValue,
       push: (item) => {
-        const newItem = item ?? createDefaultItem2(itemFieldDefs);
+        const newItem = item ?? createDefaultItem(itemFieldDefs);
         forma.setFieldValue(fieldPath, [...arrayValue, newItem]);
       },
       insert: (index, item) => {
@@ -1478,9 +235,13 @@ function FieldRenderer({
     const sourceValue = fieldDef.source ? forma.data[fieldDef.source] ?? forma.computed[fieldDef.source] : void 0;
     const {
       onChange: _onChange,
+      // omit from display props
       value: _value,
+      // omit from display props
       ...displayBaseProps
     } = baseProps;
+    void _onChange;
+    void _value;
     fieldProps = {
       ...displayBaseProps,
       fieldType: "display",
@@ -1497,34 +258,34 @@ function FieldRenderer({
     };
   }
   const componentProps = { field: fieldProps, spec };
-  const element = React2.createElement(
+  const element = React.createElement(
     Component,
     componentProps
   );
   if (className) {
-    return /* @__PURE__ */ jsx2("div", { "data-field-path": fieldPath, className, children: element });
+    return /* @__PURE__ */ jsx("div", { "data-field-path": fieldPath, className, children: element });
   }
-  return /* @__PURE__ */ jsx2("div", { "data-field-path": fieldPath, children: element });
+  return /* @__PURE__ */ jsx("div", { "data-field-path": fieldPath, children: element });
 }
 
 // src/ErrorBoundary.tsx
-import React3 from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import React2 from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function DefaultErrorFallback({
   error,
   onReset
 }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "forma-error-boundary", role: "alert", children: [
-    /* @__PURE__ */ jsx3("h3", { children: "Something went wrong" }),
-    /* @__PURE__ */ jsx3("p", { children: "An error occurred while rendering the form." }),
-    /* @__PURE__ */ jsxs2("details", { children: [
-      /* @__PURE__ */ jsx3("summary", { children: "Error details" }),
-      /* @__PURE__ */ jsx3("pre", { children: error.message })
+  return /* @__PURE__ */ jsxs("div", { className: "forma-error-boundary", role: "alert", children: [
+    /* @__PURE__ */ jsx2("h3", { children: "Something went wrong" }),
+    /* @__PURE__ */ jsx2("p", { children: "An error occurred while rendering the form." }),
+    /* @__PURE__ */ jsxs("details", { children: [
+      /* @__PURE__ */ jsx2("summary", { children: "Error details" }),
+      /* @__PURE__ */ jsx2("pre", { children: error.message })
     ] }),
-    /* @__PURE__ */ jsx3("button", { type: "button", onClick: onReset, children: "Try again" })
+    /* @__PURE__ */ jsx2("button", { type: "button", onClick: onReset, children: "Try again" })
   ] });
 }
-var FormaErrorBoundary = class extends React3.Component {
+var FormaErrorBoundary = class extends React2.Component {
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -1553,7 +314,7 @@ var FormaErrorBoundary = class extends React3.Component {
       if (fallback) {
         return fallback;
       }
-      return /* @__PURE__ */ jsx3(DefaultErrorFallback, { error: this.state.error, onReset: this.reset });
+      return /* @__PURE__ */ jsx2(DefaultErrorFallback, { error: this.state.error, onReset: this.reset });
     }
     return this.props.children;
   }