@fogpipe/forma-react 0.6.0

package/dist/index.js

@@ -0,0 +1,1039 @@
+// src/useForma.ts
+import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import {
+  getVisibility,
+  getRequired,
+  getEnabled,
+  validate,
+  calculate,
+  getPageVisibility
+} 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 useForma(options) {
+  const { spec: inputSpec, initialData = {}, onSubmit, onChange, validateOn = "blur", referenceData, validationDebounceMs = 0 } = options;
+  const spec = useMemo(() => {
+    if (!referenceData) return inputSpec;
+    return {
+      ...inputSpec,
+      referenceData: {
+        ...inputSpec.referenceData,
+        ...referenceData
+      }
+    };
+  }, [inputSpec, referenceData]);
+  const [state, dispatch] = useReducer(formReducer, {
+    data: initialData,
+    touched: {},
+    isSubmitting: false,
+    isSubmitted: false,
+    isDirty: false,
+    currentPage: 0
+  });
+  const hasInitialized = useRef(false);
+  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 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 setFieldValue = useCallback(
+    (path, value) => {
+      setNestedValue(path, value);
+      if (validateOn === "change") {
+        dispatch({ type: "SET_FIELD_TOUCHED", field: path, touched: true });
+      }
+    },
+    [validateOn, setNestedValue]
+  );
+  const setFieldTouched = useCallback((path, touched = true) => {
+    dispatch({ type: "SET_FIELD_TOUCHED", field: path, touched });
+  }, []);
+  const setValues = useCallback((values) => {
+    dispatch({ type: "SET_VALUES", values });
+  }, []);
+  const validateField = useCallback(
+    (path) => {
+      return validation.errors.filter((e) => e.field === path);
+    },
+    [validation]
+  );
+  const validateForm = useCallback(() => {
+    return validation;
+  }, [validation]);
+  const submitForm = useCallback(async () => {
+    dispatch({ type: "SET_SUBMITTING", isSubmitting: true });
+    try {
+      if (immediateValidation.valid && onSubmit) {
+        await onSubmit(state.data);
+      }
+      dispatch({ type: "SET_SUBMITTED", isSubmitted: true });
+    } finally {
+      dispatch({ type: "SET_SUBMITTING", isSubmitting: false });
+    }
+  }, [immediateValidation, onSubmit, state.data]);
+  const resetForm = useCallback(() => {
+    dispatch({ type: "RESET", initialData });
+  }, [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 currentPage = visiblePages[state.currentPage] || null;
+    const hasNextPage = state.currentPage < visiblePages.length - 1;
+    const hasPreviousPage = state.currentPage > 0;
+    const isLastPage = state.currentPage === visiblePages.length - 1;
+    return {
+      pages,
+      currentPageIndex: state.currentPage,
+      currentPage,
+      goToPage: (index) => dispatch({ type: "SET_PAGE", page: index }),
+      nextPage: () => {
+        if (hasNextPage) {
+          dispatch({ type: "SET_PAGE", page: state.currentPage + 1 });
+        }
+      },
+      previousPage: () => {
+        if (hasPreviousPage) {
+          dispatch({ type: "SET_PAGE", page: state.currentPage - 1 });
+        }
+      },
+      hasNextPage,
+      hasPreviousPage,
+      canProceed: true,
+      // TODO: Validate current page
+      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]);
+  const getValueAtPath = useCallback((path) => {
+    const parts = path.replace(/\[(\d+)\]/g, ".$1").split(".");
+    let value = state.data;
+    for (const part of parts) {
+      if (value === null || value === void 0) return void 0;
+      value = value[part];
+    }
+    return value;
+  }, [state.data]);
+  const setValueAtPath = 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 newData = { ...state.data };
+    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 });
+  }, [state.data]);
+  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.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) => {
+    const fieldDef = spec.fields[path];
+    const handlers = getFieldHandlers(path);
+    let fieldType = (fieldDef == null ? void 0 : fieldDef.type) || "text";
+    if (!fieldType || fieldType === "computed") {
+      const schemaProperty = spec.schema.properties[path];
+      if (schemaProperty) {
+        if (schemaProperty.type === "number") fieldType = "number";
+        else if (schemaProperty.type === "integer") fieldType = "integer";
+        else if (schemaProperty.type === "boolean") fieldType = "boolean";
+        else if (schemaProperty.type === "array") fieldType = "array";
+        else if (schemaProperty.type === "object") fieldType = "object";
+        else if ("enum" in schemaProperty && schemaProperty.enum) fieldType = "select";
+        else if ("format" in schemaProperty) {
+          if (schemaProperty.format === "date") fieldType = "date";
+          else if (schemaProperty.format === "date-time") fieldType = "datetime";
+          else if (schemaProperty.format === "email") fieldType = "email";
+          else if (schemaProperty.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;
+    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,
+      required: isRequired,
+      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
+    };
+  }, [spec, state.touched, state.isSubmitted, visibility, enabled, required, validation.errors, validateOn, getValueAtPath, getFieldHandlers]);
+  const getSelectFieldProps = useCallback((path) => {
+    const baseProps = getFieldProps(path);
+    const fieldDef = spec.fields[path];
+    return {
+      ...baseProps,
+      options: (fieldDef == null ? void 0 : fieldDef.options) ?? []
+    };
+  }, [getFieldProps, spec.fields]);
+  const getArrayHelpers = useCallback((path) => {
+    const fieldDef = spec.fields[path];
+    const currentValue = getValueAtPath(path) ?? [];
+    const minItems = (fieldDef == null ? void 0 : fieldDef.minItems) ?? 0;
+    const maxItems = (fieldDef == null ? void 0 : fieldDef.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 = fieldDef == null ? void 0 : fieldDef.itemFields) == null ? void 0 : _a[fieldName];
+      const handlers = getFieldHandlers(itemPath);
+      const item = currentValue[index];
+      const itemValue = item == null ? void 0 : 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;
+      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,
+        required: false,
+        // TODO: Evaluate item field required
+        touched: isTouched,
+        errors: showErrors ? fieldErrors : [],
+        onChange: handlers.onChange,
+        onBlur: handlers.onBlur
+      };
+    };
+    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, state.touched, state.isSubmitted, validation.errors, validateOn]);
+  return {
+    data: state.data,
+    computed,
+    visibility,
+    required,
+    enabled,
+    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,
+    getFieldProps,
+    getSelectFieldProps,
+    getArrayHelpers
+  };
+}
+
+// src/FormRenderer.tsx
+import React, { forwardRef, useImperativeHandle, useRef as useRef2, useMemo as useMemo2, useCallback as useCallback2 } from "react";
+
+// 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 { 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, required, 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,
+      required && /* @__PURE__ */ jsx("span", { className: "required", "aria-hidden": "true", children: "*" }),
+      required && /* @__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 {};
+  return {
+    min: "minimum" in schema ? schema.minimum : void 0,
+    max: "maximum" in schema ? schema.maximum : void 0,
+    step: schema.type === "integer" ? 1 : void 0
+  };
+}
+function createDefaultItem(itemFields) {
+  const item = {};
+  for (const [fieldName, fieldDef] of Object.entries(itemFields)) {
+    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
+    } = props;
+    const forma = useForma({
+      spec,
+      initialData,
+      onSubmit,
+      onChange,
+      validateOn
+    });
+    const fieldRefs = useRef2(/* @__PURE__ */ new Map());
+    const arrayHelpersCache = 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 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) => {
+      const fieldDef = spec.fields[fieldPath];
+      if (!fieldDef) return null;
+      const isVisible = forma.visibility[fieldPath] !== false;
+      if (!isVisible) return null;
+      const fieldType = fieldDef.type || (fieldDef.itemFields ? "array" : "text");
+      const componentKey = fieldType;
+      const Component = components[componentKey] || components.fallback;
+      if (!Component) {
+        console.warn(`No component found for field type: ${fieldType}`);
+        return null;
+      }
+      const errors = forma.errors.filter((e) => e.field === fieldPath);
+      const touched = forma.touched[fieldPath] ?? false;
+      const required = forma.required[fieldPath] ?? false;
+      const disabled = forma.enabled[fieldPath] === false;
+      const schemaProperty = spec.schema.properties[fieldPath];
+      const baseProps = {
+        name: fieldPath,
+        field: fieldDef,
+        value: forma.data[fieldPath],
+        touched,
+        required,
+        disabled,
+        errors,
+        onChange: (value) => forma.setFieldValue(fieldPath, value),
+        onBlur: () => forma.setFieldTouched(fieldPath),
+        // Convenience properties
+        visible: true,
+        // Always true since we already filtered for visibility
+        enabled: !disabled,
+        label: fieldDef.label ?? fieldPath,
+        description: fieldDef.description,
+        placeholder: fieldDef.placeholder
+      };
+      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") {
+        fieldProps = {
+          ...baseProps,
+          fieldType,
+          value: baseProps.value,
+          onChange: baseProps.onChange,
+          options: fieldDef.options ?? []
+        };
+      } else if (fieldType === "array" && fieldDef.itemFields) {
+        const arrayValue = baseProps.value ?? [];
+        const minItems = fieldDef.minItems ?? 0;
+        const maxItems = fieldDef.maxItems ?? Infinity;
+        const itemFieldDefs = fieldDef.itemFields;
+        if (!arrayHelpersCache.current.has(fieldPath)) {
+          arrayHelpersCache.current.set(fieldPath, {
+            push: (item) => {
+              const currentArray = forma.data[fieldPath] ?? [];
+              const newItem = item ?? createDefaultItem(itemFieldDefs);
+              forma.setFieldValue(fieldPath, [...currentArray, newItem]);
+            },
+            insert: (index, item) => {
+              const currentArray = forma.data[fieldPath] ?? [];
+              const newArray = [...currentArray];
+              newArray.splice(index, 0, item);
+              forma.setFieldValue(fieldPath, newArray);
+            },
+            remove: (index) => {
+              const currentArray = forma.data[fieldPath] ?? [];
+              const newArray = [...currentArray];
+              newArray.splice(index, 1);
+              forma.setFieldValue(fieldPath, newArray);
+            },
+            move: (from, to) => {
+              const currentArray = forma.data[fieldPath] ?? [];
+              const newArray = [...currentArray];
+              const [item] = newArray.splice(from, 1);
+              newArray.splice(to, 0, item);
+              forma.setFieldValue(fieldPath, newArray);
+            },
+            swap: (indexA, indexB) => {
+              const currentArray = forma.data[fieldPath] ?? [];
+              const newArray = [...currentArray];
+              [newArray[indexA], newArray[indexB]] = [newArray[indexB], newArray[indexA]];
+              forma.setFieldValue(fieldPath, newArray);
+            }
+          });
+        }
+        const cachedHelpers = arrayHelpersCache.current.get(fieldPath);
+        const helpers = {
+          items: arrayValue,
+          push: cachedHelpers.push,
+          insert: cachedHelpers.insert,
+          remove: cachedHelpers.remove,
+          move: cachedHelpers.move,
+          swap: cachedHelpers.swap,
+          getItemFieldProps: (index, fieldName) => {
+            var _a;
+            const itemFieldDef = itemFieldDefs[fieldName];
+            const itemPath = `${fieldPath}[${index}].${fieldName}`;
+            const itemValue = (_a = arrayValue[index]) == null ? void 0 : _a[fieldName];
+            return {
+              name: itemPath,
+              value: itemValue,
+              type: (itemFieldDef == null ? void 0 : itemFieldDef.type) ?? "text",
+              label: (itemFieldDef == null ? void 0 : itemFieldDef.label) ?? fieldName,
+              description: itemFieldDef == null ? void 0 : itemFieldDef.description,
+              placeholder: itemFieldDef == null ? void 0 : itemFieldDef.placeholder,
+              visible: true,
+              enabled: !disabled,
+              required: (itemFieldDef == null ? void 0 : itemFieldDef.requiredWhen) === "true",
+              touched: forma.touched[itemPath] ?? false,
+              errors: forma.errors.filter((e) => e.field === itemPath),
+              onChange: (value) => {
+                const currentArray = forma.data[fieldPath] ?? [];
+                const newArray = [...currentArray];
+                const item = newArray[index] ?? {};
+                newArray[index] = { ...item, [fieldName]: value };
+                forma.setFieldValue(fieldPath, newArray);
+              },
+              onBlur: () => forma.setFieldTouched(itemPath),
+              itemIndex: index,
+              fieldName,
+              options: itemFieldDef == null ? void 0 : itemFieldDef.options
+            };
+          },
+          minItems,
+          maxItems,
+          canAdd: arrayValue.length < maxItems,
+          canRemove: arrayValue.length > minItems
+        };
+        fieldProps = {
+          ...baseProps,
+          fieldType: "array",
+          value: arrayValue,
+          onChange: baseProps.onChange,
+          helpers,
+          itemFields: itemFieldDefs,
+          minItems,
+          maxItems
+        };
+      } else {
+        fieldProps = {
+          ...baseProps,
+          fieldType,
+          value: baseProps.value ?? "",
+          onChange: baseProps.onChange
+        };
+      }
+      const componentProps = { field: fieldProps, spec };
+      return /* @__PURE__ */ jsx(
+        FieldWrapper,
+        {
+          fieldPath,
+          field: fieldDef,
+          errors,
+          touched,
+          required,
+          visible: isVisible,
+          children: React.createElement(Component, componentProps)
+        },
+        fieldPath
+      );
+    }, [spec, forma, components, FieldWrapper]);
+    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 { jsx as jsx2 } from "react/jsx-runtime";
+function getNumberConstraints2(schema) {
+  if (!schema) return {};
+  if (schema.type !== "number" && schema.type !== "integer") return {};
+  return {
+    min: "minimum" in schema ? schema.minimum : void 0,
+    max: "maximum" in schema ? schema.maximum : void 0,
+    step: schema.type === "integer" ? 1 : void 0
+  };
+}
+function createDefaultItem2(itemFields) {
+  const item = {};
+  for (const [fieldName, fieldDef] of Object.entries(itemFields)) {
+    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, className }) {
+  const forma = useFormaContext();
+  const { spec } = forma;
+  const fieldDef = spec.fields[fieldPath];
+  if (!fieldDef) {
+    console.warn(`Field not found: ${fieldPath}`);
+    return null;
+  }
+  const isVisible = forma.visibility[fieldPath] !== false;
+  if (!isVisible) return null;
+  const fieldType = fieldDef.type || (fieldDef.itemFields ? "array" : "text");
+  const componentKey = fieldType;
+  const Component = components[componentKey] || components.fallback;
+  if (!Component) {
+    console.warn(`No component found for field type: ${fieldType}`);
+    return null;
+  }
+  const errors = forma.errors.filter((e) => e.field === fieldPath);
+  const touched = forma.touched[fieldPath] ?? false;
+  const required = forma.required[fieldPath] ?? false;
+  const disabled = forma.enabled[fieldPath] === false;
+  const schemaProperty = spec.schema.properties[fieldPath];
+  const baseProps = {
+    name: fieldPath,
+    field: fieldDef,
+    value: forma.data[fieldPath],
+    touched,
+    required,
+    disabled,
+    errors,
+    onChange: (value) => forma.setFieldValue(fieldPath, value),
+    onBlur: () => forma.setFieldTouched(fieldPath),
+    // Convenience properties
+    visible: true,
+    // Always true since we already filtered for visibility
+    enabled: !disabled,
+    label: fieldDef.label ?? fieldPath,
+    description: fieldDef.description,
+    placeholder: fieldDef.placeholder
+  };
+  let fieldProps = baseProps;
+  if (fieldType === "number") {
+    const constraints = getNumberConstraints2(schemaProperty);
+    fieldProps = {
+      ...baseProps,
+      fieldType: "number",
+      value: baseProps.value,
+      onChange: baseProps.onChange,
+      ...constraints
+    };
+  } else if (fieldType === "integer") {
+    const constraints = getNumberConstraints2(schemaProperty);
+    fieldProps = {
+      ...baseProps,
+      fieldType: "integer",
+      value: baseProps.value,
+      onChange: baseProps.onChange,
+      min: constraints.min,
+      max: constraints.max
+    };
+  } else if (fieldType === "select") {
+    fieldProps = {
+      ...baseProps,
+      fieldType: "select",
+      value: baseProps.value,
+      onChange: baseProps.onChange,
+      options: fieldDef.options ?? []
+    };
+  } else if (fieldType === "multiselect") {
+    fieldProps = {
+      ...baseProps,
+      fieldType: "multiselect",
+      value: baseProps.value ?? [],
+      onChange: baseProps.onChange,
+      options: fieldDef.options ?? []
+    };
+  } else if (fieldType === "array" && fieldDef.itemFields) {
+    const arrayValue = baseProps.value ?? [];
+    const minItems = fieldDef.minItems ?? 0;
+    const maxItems = fieldDef.maxItems ?? Infinity;
+    const itemFieldDefs = fieldDef.itemFields;
+    const helpers = {
+      items: arrayValue,
+      push: (item) => {
+        const newItem = item ?? createDefaultItem2(itemFieldDefs);
+        forma.setFieldValue(fieldPath, [...arrayValue, newItem]);
+      },
+      insert: (index, item) => {
+        const newArray = [...arrayValue];
+        newArray.splice(index, 0, item);
+        forma.setFieldValue(fieldPath, newArray);
+      },
+      remove: (index) => {
+        const newArray = [...arrayValue];
+        newArray.splice(index, 1);
+        forma.setFieldValue(fieldPath, newArray);
+      },
+      move: (from, to) => {
+        const newArray = [...arrayValue];
+        const [item] = newArray.splice(from, 1);
+        newArray.splice(to, 0, item);
+        forma.setFieldValue(fieldPath, newArray);
+      },
+      swap: (indexA, indexB) => {
+        const newArray = [...arrayValue];
+        [newArray[indexA], newArray[indexB]] = [newArray[indexB], newArray[indexA]];
+        forma.setFieldValue(fieldPath, newArray);
+      },
+      getItemFieldProps: (index, fieldName) => {
+        var _a;
+        const itemFieldDef = itemFieldDefs[fieldName];
+        const itemPath = `${fieldPath}[${index}].${fieldName}`;
+        const itemValue = (_a = arrayValue[index]) == null ? void 0 : _a[fieldName];
+        return {
+          name: itemPath,
+          value: itemValue,
+          type: (itemFieldDef == null ? void 0 : itemFieldDef.type) ?? "text",
+          label: (itemFieldDef == null ? void 0 : itemFieldDef.label) ?? fieldName,
+          description: itemFieldDef == null ? void 0 : itemFieldDef.description,
+          placeholder: itemFieldDef == null ? void 0 : itemFieldDef.placeholder,
+          visible: true,
+          enabled: !disabled,
+          required: (itemFieldDef == null ? void 0 : itemFieldDef.requiredWhen) === "true",
+          touched: forma.touched[itemPath] ?? false,
+          errors: forma.errors.filter((e) => e.field === itemPath),
+          onChange: (value) => {
+            const newArray = [...arrayValue];
+            const item = newArray[index] ?? {};
+            newArray[index] = { ...item, [fieldName]: value };
+            forma.setFieldValue(fieldPath, newArray);
+          },
+          onBlur: () => forma.setFieldTouched(itemPath),
+          itemIndex: index,
+          fieldName,
+          options: itemFieldDef == null ? void 0 : itemFieldDef.options
+        };
+      },
+      minItems,
+      maxItems,
+      canAdd: arrayValue.length < maxItems,
+      canRemove: arrayValue.length > minItems
+    };
+    fieldProps = {
+      ...baseProps,
+      fieldType: "array",
+      value: arrayValue,
+      onChange: baseProps.onChange,
+      helpers,
+      itemFields: itemFieldDefs,
+      minItems,
+      maxItems
+    };
+  } else {
+    fieldProps = {
+      ...baseProps,
+      fieldType,
+      value: baseProps.value ?? "",
+      onChange: baseProps.onChange
+    };
+  }
+  const componentProps = { field: fieldProps, spec };
+  const element = React2.createElement(Component, componentProps);
+  if (className) {
+    return /* @__PURE__ */ jsx2("div", { className, children: element });
+  }
+  return element;
+}
+
+// src/ErrorBoundary.tsx
+import React3 from "react";
+import { jsx as jsx3, jsxs as jsxs2 } 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 })
+    ] }),
+    /* @__PURE__ */ jsx3("button", { type: "button", onClick: onReset, children: "Try again" })
+  ] });
+}
+var FormaErrorBoundary = class extends React3.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    var _a, _b;
+    (_b = (_a = this.props).onError) == null ? void 0 : _b.call(_a, error, errorInfo);
+  }
+  componentDidUpdate(prevProps) {
+    if (this.state.hasError && prevProps.resetKey !== this.props.resetKey) {
+      this.setState({ hasError: false, error: null });
+    }
+  }
+  reset = () => {
+    this.setState({ hasError: false, error: null });
+  };
+  render() {
+    if (this.state.hasError && this.state.error) {
+      const { fallback } = this.props;
+      if (typeof fallback === "function") {
+        return fallback(this.state.error, this.reset);
+      }
+      if (fallback) {
+        return fallback;
+      }
+      return /* @__PURE__ */ jsx3(DefaultErrorFallback, { error: this.state.error, onReset: this.reset });
+    }
+    return this.props.children;
+  }
+};
+export {
+  FieldRenderer,
+  FormRenderer,
+  FormaContext,
+  FormaErrorBoundary,
+  useForma,
+  useFormaContext
+};
+//# sourceMappingURL=index.js.map