hs-uix 1.3.0 → 1.4.1

package/dist/index.mjs

@@ -502,28 +502,33 @@ var DataTable = ({
       return next;
     });
   }, []);
-  const flatRows = useMemo(() => {
-    if (!groupedData) return (serverSide ? data : sortedData).map((row) => ({ type: "data", row }));
-    const flat = [];
-    groupedData.forEach((group) => {
-      flat.push({ type: "group-header", group });
-      if (expandedGroups.has(group.key)) {
-        group.rows.forEach((row) => flat.push({ type: "data", row }));
-      }
-    });
-    return flat;
-  }, [groupedData, sortedData, data, serverSide, expandedGroups]);
-  const totalItems = serverSide ? totalCount || data.length : flatRows.length;
+  const datasetRows = useMemo(() => {
+    if (!groupedData) return serverSide ? data : sortedData;
+    return groupedData.flatMap((group) => group.rows);
+  }, [groupedData, sortedData, data, serverSide]);
+  const totalItems = serverSide ? totalCount || data.length : datasetRows.length;
   const pageCount = Math.ceil(totalItems / pageSize);
-  let displayRows;
-  if (serverSide) {
-    displayRows = groupBy ? flatRows : data.map((row) => ({ type: "data", row }));
-  } else {
-    displayRows = flatRows.slice(
+  const paginatedRows = useMemo(() => {
+    if (serverSide) return datasetRows;
+    return datasetRows.slice(
       (activePage - 1) * pageSize,
       activePage * pageSize
     );
-  }
+  }, [serverSide, datasetRows, activePage, pageSize]);
+  const displayRows = useMemo(() => {
+    if (!groupedData) return paginatedRows.map((row) => ({ type: "data", row }));
+    const pageRows = new Set(paginatedRows);
+    const rows = [];
+    groupedData.forEach((group) => {
+      const groupPageRows = group.rows.filter((row) => pageRows.has(row));
+      if (groupPageRows.length === 0) return;
+      rows.push({ type: "group-header", group });
+      if (expandedGroups.has(group.key)) {
+        groupPageRows.forEach((row) => rows.push({ type: "data", row }));
+      }
+    });
+    return rows;
+  }, [groupedData, paginatedRows, expandedGroups]);
   const footerData = serverSide ? data : filteredData;
   const activeChips = useMemo(() => {
     const chips = [];
@@ -634,8 +639,8 @@ var DataTable = ({
     return displayRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null);
   }, [serverSide, data, displayRows, rowIdField]);
   const allRowIds = useMemo(
-    () => flatRows.filter((r) => r.type === "data").map((r) => r.row[rowIdField]).filter((id) => id != null),
-    [flatRows, rowIdField]
+    () => datasetRows.map((row) => row[rowIdField]).filter((id) => id != null),
+    [datasetRows, rowIdField]
   );
   const handleSelectRow = useCallback((rowId, checked) => {
     const next = new Set(selectedIds);
@@ -682,19 +687,25 @@ var DataTable = ({
       if (row) onEditStart(row, field, currentValue);
     }
   }, [onEditStart, data, rowIdField]);
-  const commitEdit = useCallback((row, field, value) => {
+  const commitEdit = useCallback((row, field, value, options = {}) => {
+    const { keepEditing = false } = options;
     const col = columns.find((c) => c.field === field);
     if (col == null ? void 0 : col.editValidate) {
       const result = col.editValidate(value, row);
       if (result !== true && result !== void 0 && result !== null) {
         setEditError(typeof result === "string" ? result : "Invalid value");
-        return;
+        return false;
       }
     }
     if (onRowEdit) onRowEdit(row, field, value);
-    setEditingCell(null);
-    setEditValue(null);
+    if (!keepEditing) {
+      setEditingCell(null);
+      setEditValue(null);
+    } else {
+      setEditValue(value);
+    }
     setEditError(null);
+    return true;
   }, [onRowEdit, columns]);
   const renderEditControl = (col, row) => {
     const type = col.editType || "text";
@@ -753,12 +764,12 @@ var DataTable = ({
       case "datetime":
         return /* @__PURE__ */ React.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ React.createElement(DateInput, { ...extra, name: `${fieldName}-date`, label: "", value: editValue == null ? void 0 : editValue.date, onChange: (val) => {
           const next = { ...editValue, date: val };
-          setEditValue(next);
-          if (onRowEdit) onRowEdit(row, col.field, next);
+          handleInput(next);
+          commitEdit(row, col.field, next, { keepEditing: true });
         }, onBlur: maybeExitDatetimeEdit }), /* @__PURE__ */ React.createElement(TimeInput, { ...extra.timeProps || {}, name: `${fieldName}-time`, label: "", value: editValue == null ? void 0 : editValue.time, onChange: (val) => {
           const next = { ...editValue, time: val };
-          setEditValue(next);
-          if (onRowEdit) onRowEdit(row, col.field, next);
+          handleInput(next);
+          commitEdit(row, col.field, next, { keepEditing: true });
         }, onBlur: maybeExitDatetimeEdit }));
       case "toggle":
         return /* @__PURE__ */ React.createElement(Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
@@ -1159,6 +1170,7 @@ var getEmptyValue = (field) => {
     case "datetime":
       return void 0;
     case "display":
+    case "slot":
     case "crmPropertyList":
     case "crmAssociationPropertyList":
       return void 0;
@@ -1302,7 +1314,7 @@ var collectAsyncValidatorPromises = (value, field, allValues, context) => {
 var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   const includeCustomValidators = options.includeCustomValidators !== false;
   const msg = options.messages || {};
-  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
+  if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList" || field.type === "fieldGroup") return null;
   const isRequired = resolveRequired(field, allValues);
   const plugin = fieldTypes && fieldTypes[field.type];
   const empty = plugin && plugin.isEmpty ? plugin.isEmpty(value) : isValueEmpty(value, field);
@@ -1525,6 +1537,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     // explicit row layout array (overrides columns + columnWidth)
     sections,
     // FormBuilderSection[] — accordion field grouping
+    groups,
+    // Record<string, FormBuilderGroupOptions> — per-group rendering options keyed by group name
     gap = "sm",
     // gap between fields
     showRequiredIndicator = true,
@@ -1734,7 +1748,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const resolved = transformInitialValues && initialValues ? transformInitialValues(initialValues) : initialValues;
     const vals = {};
     for (const field of fields) {
-      if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
+      if (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") continue;
       if (field.type === "fieldGroup" && field.items && field.fields) {
         for (const item of field.items) {
           const subFields = field.fields(item);
@@ -1768,9 +1782,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const inputDebounceRef = useRef2(/* @__PURE__ */ new Map());
   const rowKeyRef = useRef2(/* @__PURE__ */ new WeakMap());
   const rowKeyCounterRef = useRef2(0);
+  const controlledBaselineLockedRef = useRef2(false);
   const initialSnapshot = useRef2(null);
   if (initialSnapshot.current === null) {
-    initialSnapshot.current = deepClone(computeInitialValues());
+    initialSnapshot.current = deepClone(values != null ? values : computeInitialValues());
   }
   const formValues = values != null ? values : internalValues;
   const formErrors = controlledErrors != null ? controlledErrors : internalErrors;
@@ -1782,6 +1797,10 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const draftValuesRef = useRef2(null);
   formValuesRef.current = formValues;
   formErrorsRef.current = formErrors;
+  const syncDirtyBaseline = useCallback2((nextValues) => {
+    initialSnapshot.current = deepClone(nextValues || {});
+    prevAutoSaveValues.current = deepClone(nextValues || {});
+  }, []);
   const fieldByName = useMemo2(() => {
     const map = /* @__PURE__ */ new Map();
     for (const field of fields) {
@@ -1858,6 +1877,11 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
     };
   }, []);
+  useEffect2(() => {
+    if (values == null) return;
+    if (controlledBaselineLockedRef.current) return;
+    syncDirtyBaseline(values);
+  }, [values, syncDirtyBaseline]);
   const isDirty = useMemo2(() => {
     return !deepEqual(formValues, initialSnapshot.current);
   }, [formValues]);
@@ -1976,6 +2000,50 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     },
     [fieldTypes]
   );
+  const setRepeaterSubFieldError = useCallback2(
+    (fieldName, rowIdx, subFieldName, errorMessage) => {
+      const key = getRepeaterErrorKey(fieldName, rowIdx, subFieldName);
+      const merged = { ...formErrorsRef.current };
+      if (errorMessage) {
+        merged[key] = errorMessage;
+      } else {
+        delete merged[key];
+      }
+      const subErrors = Object.keys(merged).filter((k) => k.startsWith(`${fieldName}[`)).map((k) => {
+        const match = k.match(/\[(\d+)\]\./);
+        const row = match ? Number(match[1]) : Number.MAX_SAFE_INTEGER;
+        return { key: k, row };
+      }).sort((a, b) => a.row - b.row);
+      if (subErrors.length > 0) {
+        const first = subErrors[0];
+        merged[fieldName] = `Row ${first.row + 1}: ${merged[first.key]}`;
+      } else if (!merged[fieldName] || merged[fieldName].startsWith("Row ")) {
+        delete merged[fieldName];
+      }
+      replaceErrors(merged);
+    },
+    [replaceErrors]
+  );
+  const expandValidationFields = useCallback2(
+    (fieldSubset) => {
+      const toValidate = fieldSubset || visibleFields;
+      const expanded = [];
+      for (const field of toValidate) {
+        if (field.type === "fieldGroup" && field.items && field.fields) {
+          for (const item of field.items) {
+            for (const subField of field.fields(item)) {
+              if (subField.visible && !subField.visible(formValues)) continue;
+              expanded.push(subField);
+            }
+          }
+          continue;
+        }
+        expanded.push(field);
+      }
+      return expanded;
+    },
+    [visibleFields, formValues]
+  );
   const validateField = useCallback2(
     (name, value) => {
       const field = fieldByName.get(name);
@@ -1995,7 +2063,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   );
   const validateVisibleFields = useCallback2(
     (fieldSubset) => {
-      const toValidate = fieldSubset || visibleFields;
+      const toValidate = expandValidationFields(fieldSubset);
       const errors = {};
       let hasErrors = false;
       for (const field of toValidate) {
@@ -2015,52 +2083,54 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
+    [expandValidationFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
-  const runAsyncValidation = useCallback2(
-    (name, value) => {
-      const field = fieldByName.get(name);
-      if (!field || field.type === "repeater") return null;
-      const val = value != null ? value : formValues[name];
-      const syncError = runValidators(val, field, formValues, fieldTypes, { includeCustomValidators: false, messages: validationMessages });
-      const prevController = asyncAbortRef.current.get(name);
+  const runAsyncValidationTarget = useCallback2(
+    (target) => {
+      const { validationKey, field, value, allValues, applyError } = target || {};
+      if (!field || !validationKey || field.type === "repeater" || field.type === "fieldGroup") return null;
+      const syncError = runValidators(value, field, allValues, fieldTypes, {
+        includeCustomValidators: false,
+        messages: validationMessages
+      });
+      const prevController = asyncAbortRef.current.get(validationKey);
       if (prevController) prevController.abort();
-      asyncAbortRef.current.delete(name);
+      asyncAbortRef.current.delete(validationKey);
       setValidatingFields((prev) => {
-        if (!prev[name]) return prev;
+        if (!prev[validationKey]) return prev;
         const next = { ...prev };
-        delete next[name];
+        delete next[validationKey];
         return next;
       });
       if (syncError) return null;
-      const version = (asyncValidationVersionRef.current.get(name) || 0) + 1;
-      asyncValidationVersionRef.current.set(name, version);
+      const version = (asyncValidationVersionRef.current.get(validationKey) || 0) + 1;
+      asyncValidationVersionRef.current.set(validationKey, version);
       const controller = typeof AbortController !== "undefined" ? new AbortController() : null;
-      if (controller) asyncAbortRef.current.set(name, controller);
+      if (controller) asyncAbortRef.current.set(validationKey, controller);
       let asyncPromises;
       try {
         asyncPromises = collectAsyncValidatorPromises(
-          val,
+          value,
           field,
-          formValues,
+          allValues,
           controller ? { signal: controller.signal } : void 0
         );
       } catch (err) {
-        updateErrors({ [name]: (err == null ? void 0 : err.message) || "Validation failed" });
+        applyError((err == null ? void 0 : err.message) || "Validation failed");
         return null;
       }
       if (asyncPromises.length === 0) {
-        asyncAbortRef.current.delete(name);
+        asyncAbortRef.current.delete(validationKey);
         return null;
       }
       const validationPromise = Promise.all(asyncPromises).then(
         (results) => {
-          if (asyncValidationVersionRef.current.get(name) !== version) return;
-          asyncValidationRef.current.delete(name);
-          asyncAbortRef.current.delete(name);
+          if (asyncValidationVersionRef.current.get(validationKey) !== version) return;
+          asyncValidationRef.current.delete(validationKey);
+          asyncAbortRef.current.delete(validationKey);
           setValidatingFields((prev) => {
             const next = { ...prev };
-            delete next[name];
+            delete next[validationKey];
             return next;
           });
           let err = null;
@@ -2071,50 +2141,128 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
               break;
             }
           }
-          updateErrors({ [name]: err });
+          applyError(err);
         },
         (rejection) => {
-          if (asyncValidationVersionRef.current.get(name) !== version) return;
-          asyncValidationRef.current.delete(name);
-          asyncAbortRef.current.delete(name);
+          if (asyncValidationVersionRef.current.get(validationKey) !== version) return;
+          asyncValidationRef.current.delete(validationKey);
+          asyncAbortRef.current.delete(validationKey);
           setValidatingFields((prev) => {
             const next = { ...prev };
-            delete next[name];
+            delete next[validationKey];
             return next;
           });
           if (rejection && rejection.name === "AbortError") return;
-          updateErrors({ [name]: (rejection == null ? void 0 : rejection.message) || "Validation failed" });
+          applyError((rejection == null ? void 0 : rejection.message) || "Validation failed");
         }
       );
-      asyncValidationRef.current.set(name, validationPromise);
-      setValidatingFields((prev) => ({ ...prev, [name]: true }));
+      asyncValidationRef.current.set(validationKey, validationPromise);
+      setValidatingFields((prev) => ({ ...prev, [validationKey]: true }));
       return validationPromise;
     },
-    [fieldByName, formValues, fieldTypes, updateErrors]
+    [fieldTypes, validationMessages]
   );
-  const triggerAsyncValidation = useCallback2(
+  const runAsyncValidation = useCallback2(
     (name, value) => {
       const field = fieldByName.get(name);
-      if (!field || field.type === "repeater") return;
-      const debounceMs = field.validateDebounce;
+      if (!field || field.type === "repeater" || field.type === "fieldGroup") return null;
+      return runAsyncValidationTarget({
+        validationKey: name,
+        field,
+        value: value != null ? value : formValues[name],
+        allValues: formValues,
+        applyError: (errorMessage) => updateErrors({ [name]: errorMessage })
+      });
+    },
+    [fieldByName, formValues, runAsyncValidationTarget, updateErrors]
+  );
+  const triggerAsyncValidationTarget = useCallback2(
+    (target) => {
+      if (!(target == null ? void 0 : target.field) || !target.validationKey) return;
+      const debounceMs = target.field.validateDebounce;
       if (debounceMs && debounceMs > 0) {
-        const existing = debounceTimersRef.current.get(name);
+        const existing = debounceTimersRef.current.get(target.validationKey);
         if (existing) clearTimeout(existing);
         const timer = setTimeout(() => {
-          debounceTimersRef.current.delete(name);
-          runAsyncValidation(name, value);
+          debounceTimersRef.current.delete(target.validationKey);
+          runAsyncValidationTarget(target);
         }, debounceMs);
-        debounceTimersRef.current.set(name, timer);
+        debounceTimersRef.current.set(target.validationKey, timer);
       } else {
-        runAsyncValidation(name, value);
+        runAsyncValidationTarget(target);
       }
     },
-    [fieldByName, runAsyncValidation]
+    [runAsyncValidationTarget]
+  );
+  const triggerAsyncValidation = useCallback2(
+    (name, value) => {
+      const field = fieldByName.get(name);
+      if (!field || field.type === "repeater" || field.type === "fieldGroup") return;
+      triggerAsyncValidationTarget({
+        validationKey: name,
+        field,
+        value: value != null ? value : formValuesRef.current[name],
+        allValues: formValuesRef.current,
+        applyError: (errorMessage) => updateErrors({ [name]: errorMessage })
+      });
+    },
+    [fieldByName, triggerAsyncValidationTarget, updateErrors]
+  );
+  const getAsyncValidationTargets = useCallback2(
+    (fieldSubset) => {
+      const toValidate = fieldSubset || visibleFields;
+      const targets = [];
+      for (const field of toValidate) {
+        if (field.type === "fieldGroup" && field.items && field.fields) {
+          for (const item of field.items) {
+            for (const subField of field.fields(item)) {
+              if (subField.visible && !subField.visible(formValues)) continue;
+              targets.push({
+                validationKey: subField.name,
+                field: subField,
+                value: formValues[subField.name],
+                allValues: formValues,
+                applyError: (errorMessage) => updateErrors({ [subField.name]: errorMessage })
+              });
+            }
+          }
+          continue;
+        }
+        if (field.type === "repeater") {
+          const rows = Array.isArray(formValues[field.name]) ? formValues[field.name] : [];
+          const subFields = field.fields || [];
+          rows.forEach((row, rowIdx) => {
+            const rowValues = { ...formValues, [field.name]: rows };
+            subFields.forEach((subField) => {
+              if (subField.visible && !subField.visible(rowValues)) return;
+              targets.push({
+                validationKey: getRepeaterErrorKey(field.name, rowIdx, subField.name),
+                field: subField,
+                value: row == null ? void 0 : row[subField.name],
+                allValues: rowValues,
+                applyError: (errorMessage) => setRepeaterSubFieldError(field.name, rowIdx, subField.name, errorMessage)
+              });
+            });
+          });
+          continue;
+        }
+        targets.push({
+          validationKey: field.name,
+          field,
+          value: formValues[field.name],
+          allValues: formValues,
+          applyError: (errorMessage) => updateErrors({ [field.name]: errorMessage })
+        });
+      }
+      return targets;
+    },
+    [visibleFields, formValues, setRepeaterSubFieldError, updateErrors]
   );
   const commitValues = useCallback2(
     (nextValues) => {
       formValuesRef.current = nextValues;
       if (values != null) {
+        controlledBaselineLockedRef.current = true;
         if (onChange) onChange(nextValues);
       } else {
         setInternalValues(nextValues);
@@ -2132,7 +2280,8 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     [commitValues]
   );
   const handleFieldChange = useCallback2(
-    (name, value) => {
+    (name, value, options = {}) => {
+      const { clearNestedErrors = true } = options;
       const newValues = { ...formValuesRef.current, [name]: value };
       const queue = [name];
       const visited = /* @__PURE__ */ new Set();
@@ -2173,9 +2322,11 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       if (formErrorsRef.current[name] != null) {
         clearedErrors[name] = null;
       }
-      for (const key of Object.keys(formErrorsRef.current)) {
-        if (key.startsWith(`${name}[`)) {
-          clearedErrors[key] = null;
+      if (clearNestedErrors) {
+        for (const key of Object.keys(formErrorsRef.current)) {
+          if (key.startsWith(`${name}[`)) {
+            clearedErrors[key] = null;
+          }
         }
       }
       draftValuesRef.current = newValues;
@@ -2244,7 +2395,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           replaceErrors(errors);
           return;
         }
-        const asyncSubmitValidations = allVisibleFields.map((field) => runAsyncValidation(field.name, formValues[field.name])).filter(Boolean);
+        const asyncSubmitValidations = getAsyncValidationTargets(allVisibleFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
         if (asyncSubmitValidations.length > 0 || asyncValidationRef.current.size > 0) {
           const pendingValidations = [
             .../* @__PURE__ */ new Set([
@@ -2259,6 +2410,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const reset = () => {
         const fresh = computeInitialValues();
         if (values == null) setInternalValues(fresh);
+        controlledBaselineLockedRef.current = false;
         replaceErrors({});
         initialSnapshot.current = deepClone(fresh);
         prevAutoSaveValues.current = deepClone(fresh);
@@ -2266,7 +2418,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       const rawValues = {};
       for (const key of Object.keys(formValues)) {
         const f = fieldByName.get(key);
-        if (f && (f.type === "display" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
+        if (f && (f.type === "display" || f.type === "slot" || f.type === "crmPropertyList" || f.type === "crmAssociationPropertyList" || f.type === "fieldGroup")) continue;
         rawValues[key] = f && f.transformOut ? f.transformOut(formValues[key]) : formValues[key];
       }
       for (const f of fields) {
@@ -2298,7 +2450,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         if (controlledLoading == null) setInternalLoading(false);
       }
     },
-    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, runAsyncValidation]
+    [validateOnSubmit, allVisibleFields, validateVisibleFields, replaceErrors, onSubmit, values, controlledLoading, transformValues, onBeforeSubmit, onSubmitSuccess, onSubmitError, resetOnSuccess, formValues, fieldByName, getAsyncValidationTargets, runAsyncValidationTarget]
   );
   const handleNext = useCallback2(async () => {
     if (!isMultiStep) return;
@@ -2310,7 +2462,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
         replaceErrors({ ...formErrorsRef.current, ...errors });
         return;
       }
-      const asyncStepValidations = stepFields.map((field) => runAsyncValidation(field.name, formValues[field.name])).filter(Boolean);
+      const asyncStepValidations = getAsyncValidationTargets(stepFields).map((target) => runAsyncValidationTarget(target)).filter(Boolean);
       if (asyncStepValidations.length > 0 || asyncValidationRef.current.size > 0) {
         const pendingValidations = [
           .../* @__PURE__ */ new Set([
@@ -2335,7 +2487,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     } else {
       setInternalStep(nextStep);
     }
-  }, [isMultiStep, validateStepOnNext, steps, currentStep, formValues, validateVisibleFields, controlledStep, onStepChange, replaceErrors, allVisibleFields, runAsyncValidation]);
+  }, [isMultiStep, validateStepOnNext, steps, currentStep, formValues, validateVisibleFields, controlledStep, onStepChange, replaceErrors, allVisibleFields, getAsyncValidationTargets, runAsyncValidationTarget]);
   const handleBack = useCallback2(() => {
     if (!isMultiStep) return;
     const prevStep = Math.max(currentStep - 1, 0);
@@ -2367,6 +2519,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     reset: () => {
       const fresh = computeInitialValues();
       if (values == null) setInternalValues(fresh);
+      controlledBaselineLockedRef.current = false;
       replaceErrors({});
       initialSnapshot.current = deepClone(fresh);
       prevAutoSaveValues.current = deepClone(fresh);
@@ -2379,30 +2532,6 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
       replaceErrors(errors);
     }
   }));
-  const setRepeaterSubFieldError = useCallback2(
-    (fieldName, rowIdx, subFieldName, errorMessage) => {
-      const key = getRepeaterErrorKey(fieldName, rowIdx, subFieldName);
-      const merged = { ...formErrorsRef.current };
-      if (errorMessage) {
-        merged[key] = errorMessage;
-      } else {
-        delete merged[key];
-      }
-      const subErrors = Object.keys(merged).filter((k) => k.startsWith(`${fieldName}[`)).map((k) => {
-        const match = k.match(/\[(\d+)\]\./);
-        const row = match ? Number(match[1]) : Number.MAX_SAFE_INTEGER;
-        return { key: k, row };
-      }).sort((a, b) => a.row - b.row);
-      if (subErrors.length > 0) {
-        const first = subErrors[0];
-        merged[fieldName] = `Row ${first.row + 1}: ${merged[first.key]}`;
-      } else if (!merged[fieldName] || merged[fieldName].startsWith("Row ")) {
-        delete merged[fieldName];
-      }
-      replaceErrors(merged);
-    },
-    [replaceErrors]
-  );
   const renderField = (field) => {
     const fieldError = formErrors[field.name] || null;
     const rendered = renderFieldInner(field);
@@ -2417,7 +2546,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const isReadOnly = field.readOnly || formReadOnly;
     const isDisabled = disabled || resolveDisabled(field, formValues) || formReadOnly;
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
-    if (field.type === "display") {
+    if (field.type === "display" || field.type === "slot") {
       if (field.render) {
         return field.render({
           values: formValues,
@@ -2882,12 +3011,13 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           const rowValues = { ...formValues, [field.name]: nextRows };
           const err = runValidators(subValue, subField, rowValues, fieldTypes, { messages: validationMessages });
           setRepeaterSubFieldError(field.name, rowIdx, subField.name, err);
+          return err;
         };
         const handleSubFieldChange = (rowIdx, subField, subValue) => {
           const updated = rows.map(
             (row, i) => i === rowIdx ? { ...row, [subField.name]: subValue } : row
           );
-          handleFieldChange(field.name, updated);
+          handleFieldChange(field.name, updated, { clearNestedErrors: false });
           if (validateOnChange) {
             validateSubField(rowIdx, subField, subValue, updated);
           }
@@ -2897,13 +3027,24 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
           const nextRows = rows.map(
             (row, i) => i === rowIdx ? { ...row, [subField.name]: subValue } : row
           );
-          validateSubField(rowIdx, subField, subValue, nextRows);
+          const err = validateSubField(rowIdx, subField, subValue, nextRows);
+          if (err) return;
+          const validationKey = getRepeaterErrorKey(field.name, rowIdx, subField.name);
+          const rowValues = { ...formValues, [field.name]: nextRows };
+          triggerAsyncValidationTarget({
+            validationKey,
+            field: subField,
+            value: subValue,
+            allValues: rowValues,
+            applyError: (errorMessage) => setRepeaterSubFieldError(field.name, rowIdx, subField.name, errorMessage)
+          });
         };
         return /* @__PURE__ */ React2.createElement(Flex2, { direction: "column", gap: "xs" }, field.label && /* @__PURE__ */ React2.createElement(Text2, { format: { fontWeight: "demibold" } }, field.label, isRequired ? " *" : ""), field.description && /* @__PURE__ */ React2.createElement(Text2, { variant: "microcopy" }, field.description), rows.map((row, rowIdx) => /* @__PURE__ */ React2.createElement(Flex2, { key: getRowKey(field.name, row, rowIdx), direction: "row", gap: "xs", align: "end" }, subFields.map((sf) => {
           const sfValue = row[sf.name];
           const sfLabel = rowIdx === 0 ? sf.label : void 0;
           const sfOptions = resolveOptions(sf, { ...formValues, [field.name]: rows });
           const sfError = formErrors[getRepeaterErrorKey(field.name, rowIdx, sf.name)] || null;
+          const validationKey = getRepeaterErrorKey(field.name, rowIdx, sf.name);
           const sfProps = {
             name: `${field.name}-${rowIdx}-${sf.name}`,
             label: sfLabel,
@@ -2912,6 +3053,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
             disabled: resolveDisabled(sf, formValues) || isDisabled,
             error: !!sfError,
             validationMessage: sfError || void 0,
+            ...validatingFields[validationKey] ? { loading: true } : {},
             ...sf.fieldProps || {}
           };
           let sfElement;
@@ -2989,7 +3131,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
   const getFieldColSpan = (field) => {
     if (field.colSpan != null) return Math.min(field.colSpan, columns);
     if (field.width === "full" && columns > 1) return columns;
-    if (columns > 1 && (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
+    if (columns > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return columns;
     return 1;
   };
   const getDependents = (parentField) => visibleFields.filter(
@@ -3014,7 +3156,7 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const colSpan = (field) => {
       if (field.colSpan != null) return Math.min(field.colSpan, cols);
       if (field.width === "full" && cols > 1) return cols;
-      if (cols > 1 && (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
+      if (cols > 1 && (field.type === "display" || field.type === "slot" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList")) return cols;
       return 1;
     };
     const flushRow = () => {
@@ -3178,13 +3320,23 @@ var FormBuilder = forwardRef(function FormBuilder2(props, ref) {
     const elements = [];
     for (let i = 0; i < chunks.length; i++) {
       const chunk = chunks[i];
-      if (i > 0) {
+      const opts = chunk.group && groups && groups[chunk.group] || {};
+      const showDivider = opts.showDivider !== false;
+      const showLabel = opts.showLabel !== false;
+      if (i > 0 && showDivider) {
         elements.push(/* @__PURE__ */ React2.createElement(Divider, { key: `group-div-${i}` }));
       }
-      if (chunk.group) {
-        elements.push(
-          /* @__PURE__ */ React2.createElement(Text2, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, chunk.group)
-        );
+      if (chunk.group && showLabel) {
+        if (typeof opts.renderHeader === "function") {
+          const header = opts.renderHeader(chunk.group, chunk.fields, formValues);
+          if (header) elements.push(
+            /* @__PURE__ */ React2.createElement(React2.Fragment, { key: `group-header-${i}` }, header)
+          );
+        } else {
+          elements.push(
+            /* @__PURE__ */ React2.createElement(Text2, { key: `group-label-${i}`, format: { fontWeight: "demibold" } }, opts.label || chunk.group)
+          );
+        }
       }
       const chunkElements = renderFn(chunk.fields);
       if (Array.isArray(chunkElements)) {