@fogpipe/forma-react 0.11.2 → 0.12.0-alpha.2

package/dist/index.js

@@ -1,9 +1,18 @@
 // src/useForma.ts
-import { useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+  useState
+} from "react";
+import { isAdornableField } from "@fogpipe/forma-core";
 import {
   getVisibility,
   getRequired,
   getEnabled,
+  getReadonly,
   validate,
   calculate,
   getPageVisibility,
@@ -64,7 +73,15 @@ function getDefaultBooleanValues(spec) {
   return defaults;
 }
 function useForma(options) {
-  const { spec: inputSpec, initialData = {}, onSubmit, onChange, validateOn = "blur", referenceData, validationDebounceMs = 0 } = options;
+  const {
+    spec: inputSpec,
+    initialData = {},
+    onSubmit,
+    onChange,
+    validateOn = "blur",
+    referenceData,
+    validationDebounceMs = 0
+  } = options;
   const spec = useMemo(() => {
     if (!referenceData) return inputSpec;
     return {
@@ -103,6 +120,10 @@ function useForma(options) {
     () => 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]
@@ -130,33 +151,39 @@ function useForma(options) {
       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];
+  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;
       }
-      current[pathParts[pathParts.length - 1]] = val;
-      return result;
-    };
-    dispatch({ type: "SET_VALUES", values: buildNestedObject(state.data, parts, value) });
-  }, [state.data]);
+      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);
@@ -207,7 +234,10 @@ function useForma(options) {
     }));
     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);
+    const clampedPageIndex = Math.min(
+      Math.max(0, state.currentPage),
+      maxPageIndex
+    );
     if (clampedPageIndex !== state.currentPage && visiblePages.length > 0) {
       dispatch({ type: "SET_PAGE", page: clampedPageIndex });
     }
@@ -300,7 +330,7 @@ function useForma(options) {
     const validFields = new Set(spec.fieldOrder);
     for (const fieldId of spec.fieldOrder) {
       const fieldDef = spec.fields[fieldId];
-      if (fieldDef == null ? void 0 : fieldDef.itemFields) {
+      if ((fieldDef == null ? void 0 : fieldDef.type) === "array" && fieldDef.itemFields) {
         for (const key of fieldHandlers.current.keys()) {
           if (key.startsWith(`${fieldId}[`)) {
             validFields.add(key);
@@ -315,183 +345,272 @@ function useForma(options) {
       }
     }
   }, [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 getFieldHandlers = useCallback(
+    (path) => {
+      if (!fieldHandlers.current.has(path)) {
+        fieldHandlers.current.set(path, {
+          onChange: (value) => setValueAtPath(path, value),
+          onBlur: () => setFieldTouched(path)
+        });
       }
-    }
-    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);
-    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,
-      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
-    };
-  }, [spec, state.touched, state.isSubmitted, visibility, enabled, 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 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) => {
+      return fieldHandlers.current.get(path);
+    },
+    [setValueAtPath, setFieldTouched]
+  );
+  const getFieldProps = useCallback(
+    (path) => {
       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[fieldName];
-      const fieldErrors = validation.errors.filter((e) => e.field === itemPath);
-      const isTouched = state.touched[itemPath] ?? false;
+      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 visibleOptions = optionsVisibility[itemPath];
+      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: 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,
+        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: false,
-        // TODO: Evaluate item field required
-        showRequiredIndicator: false,
-        // Item fields don't show required indicator
+        readonly: readonly[path] ?? false,
+        required: isRequired,
+        showRequiredIndicator,
         touched: isTouched,
-        errors: showErrors ? fieldErrors : [],
+        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
       };
-    };
-    return {
-      items: currentValue,
-      push: (item) => {
-        if (canAdd) {
-          setValueAtPath(path, [...currentValue, item]);
-        }
-      },
-      remove: (index) => {
-        if (canRemove) {
+    },
+    [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];
-          newArray.splice(index, 1);
+          const [item] = newArray.splice(from, 1);
+          newArray.splice(to, 0, item);
           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) {
+        },
+        swap: (indexA, indexB) => {
           const newArray = [...currentValue];
-          newArray.splice(index, 0, item);
+          [newArray[indexA], newArray[indexB]] = [
+            newArray[indexB],
+            newArray[indexA]
+          ];
           setValueAtPath(path, newArray);
-        }
-      },
-      getItemFieldProps,
-      minItems,
-      maxItems,
-      canAdd,
-      canRemove
-    };
-  }, [spec.fields, getValueAtPath, setValueAtPath, getFieldHandlers, enabled, state.touched, state.isSubmitted, validation.errors, validateOn, optionsVisibility]);
-  return {
-    data: state.data,
-    computed,
-    visibility,
-    required,
-    enabled,
-    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,
-    getFieldProps,
-    getSelectFieldProps,
-    getArrayHelpers
-  };
+        },
+        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
+    ]
+  );
+  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,
+      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,
+      getFieldProps,
+      getSelectFieldProps,
+      getArrayHelpers
+    ]
+  );
 }
 
 // src/FormRenderer.tsx
-import React, { forwardRef, useImperativeHandle, useRef as useRef2, useMemo as useMemo2, useCallback as useCallback2 } from "react";
+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";
@@ -521,7 +640,14 @@ function DefaultLayout({ children, onSubmit, isSubmitting }) {
     }
   );
 }
-function DefaultFieldWrapper({ fieldPath, field, children, errors, showRequiredIndicator, visible }) {
+function DefaultFieldWrapper({
+  fieldPath,
+  field,
+  children,
+  errors,
+  showRequiredIndicator,
+  visible
+}) {
   if (!visible) return null;
   const errorId = `${fieldPath}-error`;
   const descriptionId = field.description ? `${fieldPath}-description` : void 0;
@@ -546,7 +672,11 @@ function DefaultFieldWrapper({ fieldPath, field, children, errors, showRequiredI
     field.description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "field-description", children: field.description })
   ] });
 }
-function DefaultPageWrapper({ title, description, children }) {
+function DefaultPageWrapper({
+  title,
+  description,
+  children
+}) {
   return /* @__PURE__ */ jsxs("div", { className: "page-wrapper", children: [
     /* @__PURE__ */ jsx("h2", { children: title }),
     description && /* @__PURE__ */ jsx("p", { children: description }),
@@ -625,6 +755,20 @@ var FormRenderer = forwardRef(
       }),
       [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) {
@@ -636,131 +780,179 @@ var FormRenderer = forwardRef(
       }
       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 = 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 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 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: forma.optionsVisibility[fieldPath] ?? fieldDef.options ?? []
-        };
-      } else if (fieldType === "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 = forma.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: forma.optionsVisibility[itemPath] ?? (itemFieldDef == null ? void 0 : itemFieldDef.options)
-          };
-        };
-        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,
-          minItems,
-          maxItems
-        };
-      } else {
-        fieldProps = {
-          ...baseProps,
-          fieldType,
-          value: baseProps.value ?? "",
-          onChange: baseProps.onChange
-        };
-      }
-      const componentProps = { field: fieldProps, spec };
-      return /* @__PURE__ */ jsx(
-        FieldWrapper,
-        {
-          fieldPath,
+    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,
-          errors,
+          value: formaData[fieldPath],
           touched,
           required,
-          showRequiredIndicator,
-          visible: isVisible,
-          children: React.createElement(Component, componentProps)
-        },
-        fieldPath
-      );
-    }, [spec, forma, components, FieldWrapper]);
+          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,
+            minItems,
+            maxItems
+          };
+        } 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]
@@ -796,6 +988,7 @@ var FormRenderer = forwardRef(
 
 // 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 {};
@@ -823,7 +1016,11 @@ function createDefaultItem2(itemFields) {
   }
   return item;
 }
-function FieldRenderer({ fieldPath, components, className }) {
+function FieldRenderer({
+  fieldPath,
+  components,
+  className
+}) {
   const forma = useFormaContext();
   const { spec } = forma;
   const fieldDef = spec.fields[fieldPath];
@@ -832,8 +1029,10 @@ function FieldRenderer({ fieldPath, components, className }) {
     return null;
   }
   const isVisible = forma.visibility[fieldPath] !== false;
-  if (!isVisible) return null;
-  const fieldType = fieldDef.type || (fieldDef.itemFields ? "array" : "text");
+  if (!isVisible) {
+    return /* @__PURE__ */ jsx2("div", { "data-field-path": fieldPath, hidden: true });
+  }
+  const fieldType = fieldDef.type;
   const componentKey = fieldType;
   const Component = components[componentKey] || components.fallback;
   if (!Component) {
@@ -845,6 +1044,7 @@ function FieldRenderer({ fieldPath, components, className }) {
   const required = forma.required[fieldPath] ?? false;
   const disabled = forma.enabled[fieldPath] === false;
   const schemaProperty = spec.schema.properties[fieldPath];
+  const isReadonly = forma.readonly[fieldPath] ?? false;
   const baseProps = {
     name: fieldPath,
     field: fieldDef,
@@ -859,9 +1059,18 @@ function FieldRenderer({ fieldPath, components, className }) {
     visible: true,
     // Always true since we already filtered for visibility
     enabled: !disabled,
+    readonly: isReadonly,
     label: fieldDef.label ?? fieldPath,
     description: fieldDef.description,
-    placeholder: fieldDef.placeholder
+    placeholder: fieldDef.placeholder,
+    // Adorner properties (only for adornable field types)
+    ...isAdornableField3(fieldDef) && {
+      prefix: fieldDef.prefix,
+      suffix: fieldDef.suffix
+    },
+    // Presentation variant
+    variant: fieldDef.variant,
+    variantConfig: fieldDef.variantConfig
   };
   let fieldProps = baseProps;
   if (fieldType === "number") {
@@ -901,7 +1110,7 @@ function FieldRenderer({ fieldPath, components, className }) {
       onChange: baseProps.onChange,
       options: visibleOptions
     };
-  } else if (fieldType === "array" && fieldDef.itemFields) {
+  } else if (fieldType === "array" && fieldDef.type === "array" && fieldDef.itemFields) {
     const arrayValue = baseProps.value ?? [];
     const minItems = fieldDef.minItems ?? 0;
     const maxItems = fieldDef.maxItems ?? Infinity;
@@ -930,7 +1139,10 @@ function FieldRenderer({ fieldPath, components, className }) {
       },
       swap: (indexA, indexB) => {
         const newArray = [...arrayValue];
-        [newArray[indexA], newArray[indexB]] = [newArray[indexB], newArray[indexA]];
+        [newArray[indexA], newArray[indexB]] = [
+          newArray[indexB],
+          newArray[indexA]
+        ];
         forma.setFieldValue(fieldPath, newArray);
       },
       getItemFieldProps: (index, fieldName) => {
@@ -948,6 +1160,7 @@ function FieldRenderer({ fieldPath, components, className }) {
           placeholder: itemFieldDef == null ? void 0 : itemFieldDef.placeholder,
           visible: true,
           enabled: !disabled,
+          readonly: forma.readonly[itemPath] ?? false,
           required: (itemFieldDef == null ? void 0 : itemFieldDef.requiredWhen) === "true",
           touched: forma.touched[itemPath] ?? false,
           errors: forma.errors.filter((e) => e.field === itemPath),
@@ -978,6 +1191,20 @@ function FieldRenderer({ fieldPath, components, className }) {
       minItems,
       maxItems
     };
+  } else if (fieldType === "display" && fieldDef.type === "display") {
+    const sourceValue = fieldDef.source ? forma.data[fieldDef.source] ?? forma.computed[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,
@@ -987,11 +1214,14 @@ function FieldRenderer({ fieldPath, components, className }) {
     };
   }
   const componentProps = { field: fieldProps, spec };
-  const element = React2.createElement(Component, componentProps);
+  const element = React2.createElement(
+    Component,
+    componentProps
+  );
   if (className) {
-    return /* @__PURE__ */ jsx2("div", { className, children: element });
+    return /* @__PURE__ */ jsx2("div", { "data-field-path": fieldPath, className, children: element });
   }
-  return element;
+  return /* @__PURE__ */ jsx2("div", { "data-field-path": fieldPath, children: element });
 }
 
 // src/ErrorBoundary.tsx