hs-uix 1.4.0 → 1.5.0

package/dist/index.js

@@ -29,8 +29,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.js
 var src_exports = {};
 __export(src_exports, {
+  AutoStatusTag: () => AutoStatusTag,
+  AutoTag: () => AutoTag,
   DataTable: () => DataTable,
   FormBuilder: () => FormBuilder,
+  createStatusTagSortComparator: () => createStatusTagSortComparator,
+  getAutoStatusTagVariant: () => getAutoStatusTagVariant,
+  getAutoTagVariant: () => getAutoTagVariant,
   useFormPrefill: () => useFormPrefill
 });
 module.exports = __toCommonJS(src_exports);
@@ -311,7 +316,9 @@ var DataTable = ({
   const initialSortState = (0, import_react.useMemo)(() => {
     return normalizeSortState(columns, defaultSort);
   }, [columns, defaultSort]);
-  const [internalSearchTerm, setInternalSearchTerm] = (0, import_react.useState)("");
+  const [internalSearchTerm, setInternalSearchTerm] = (0, import_react.useState)(
+    () => serverSide && searchValue != null ? searchValue : ""
+  );
   const [internalFilterValues, setInternalFilterValues] = (0, import_react.useState)(() => {
     const init = {};
     filters.forEach((f) => {
@@ -322,7 +329,16 @@ var DataTable = ({
   const [internalSortState, setInternalSortState] = (0, import_react.useState)(initialSortState);
   const [currentPage, setCurrentPage] = (0, import_react.useState)(1);
   const [showMoreFilters, setShowMoreFilters] = (0, import_react.useState)(false);
+  const lastAppliedSearchRef = (0, import_react.useRef)(
+    serverSide && searchValue != null ? searchValue : ""
+  );
   const searchTerm = serverSide && searchValue != null ? searchValue : internalSearchTerm;
+  (0, import_react.useEffect)(() => {
+    if (!serverSide || searchValue == null) return;
+    if (searchValue === lastAppliedSearchRef.current) return;
+    lastAppliedSearchRef.current = searchValue;
+    setInternalSearchTerm(searchValue);
+  }, [serverSide, searchValue]);
   const filterValues = serverSide && externalFilterValues != null ? externalFilterValues : internalFilterValues;
   const externalSortState = (0, import_react.useMemo)(
     () => normalizeSortState(columns, externalSort),
@@ -356,15 +372,16 @@ var DataTable = ({
   const handleSearchChange = (0, import_react.useCallback)((term) => {
     setInternalSearchTerm(term);
     resetPage();
+    const dispatch = () => {
+      lastAppliedSearchRef.current = term;
+      fireSearchCallback(term);
+      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+    };
     if (searchDebounce > 0) {
       if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => {
-        fireSearchCallback(term);
-        fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
-      }, searchDebounce);
+      debounceRef.current = setTimeout(dispatch, searchDebounce);
     } else {
-      fireSearchCallback(term);
-      fireParamsChange({ search: term, page: resetPageOnChange ? 1 : void 0 });
+      dispatch();
     }
   }, [searchDebounce, fireSearchCallback, fireParamsChange, resetPage, resetPageOnChange]);
   (0, import_react.useEffect)(() => () => {
@@ -446,10 +463,23 @@ var DataTable = ({
     if (serverSide) return filteredData;
     const activeField = Object.keys(sortState).find((k) => sortState[k] !== "none");
     if (!activeField) return filteredData;
+    const activeCol = columns.find((c) => c.field === activeField);
+    const sortOrder = Array.isArray(activeCol == null ? void 0 : activeCol.sortOrder) ? activeCol.sortOrder : null;
+    const sortOrderIndex = (val) => {
+      const idx = sortOrder.indexOf(val);
+      return idx === -1 ? sortOrder.length : idx;
+    };
     return [...filteredData].sort((a, b) => {
       const dir = sortState[activeField] === "ascending" ? 1 : -1;
       const aVal = a[activeField];
       const bVal = b[activeField];
+      if (typeof (activeCol == null ? void 0 : activeCol.sortComparator) === "function") {
+        return dir * activeCol.sortComparator(aVal, bVal, a, b);
+      }
+      if (sortOrder) {
+        const diff = sortOrderIndex(aVal) - sortOrderIndex(bVal);
+        if (diff !== 0) return dir * diff;
+      }
       if (aVal == null && bVal == null) return 0;
       if (aVal == null) return 1;
       if (bVal == null) return -1;
@@ -457,7 +487,7 @@ var DataTable = ({
       if (aVal > bVal) return dir;
       return 0;
     });
-  }, [filteredData, sortState, serverSide]);
+  }, [filteredData, sortState, serverSide, columns]);
   const groupedData = (0, import_react.useMemo)(() => {
     if (!groupBy) return null;
     const source = serverSide ? data : sortedData;
@@ -509,28 +539,33 @@ var DataTable = ({
       return next;
     });
   }, []);
-  const flatRows = (0, import_react.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 = (0, import_react.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 = (0, import_react.useMemo)(() => {
+    if (serverSide) return datasetRows;
+    return datasetRows.slice(
       (activePage - 1) * pageSize,
       activePage * pageSize
     );
-  }
+  }, [serverSide, datasetRows, activePage, pageSize]);
+  const displayRows = (0, import_react.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 = (0, import_react.useMemo)(() => {
     const chips = [];
@@ -641,8 +676,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 = (0, import_react.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 = (0, import_react.useCallback)((rowId, checked) => {
     const next = new Set(selectedIds);
@@ -689,19 +724,25 @@ var DataTable = ({
       if (row) onEditStart(row, field, currentValue);
     }
   }, [onEditStart, data, rowIdField]);
-  const commitEdit = (0, import_react.useCallback)((row, field, value) => {
+  const commitEdit = (0, import_react.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";
@@ -760,12 +801,12 @@ var DataTable = ({
       case "datetime":
         return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.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__ */ import_react.default.createElement(import_ui_extensions.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__ */ import_react.default.createElement(import_ui_extensions.Toggle, { ...extra, name: fieldName, label: "", checked: !!editValue, onChange: commit });
@@ -970,12 +1011,12 @@ var DataTable = ({
       }
     );
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "xs" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 3 }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", gap: "sm" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.SearchInput,
     {
       name: "datatable-search",
       placeholder: searchPlaceholder,
-      value: searchTerm,
+      value: internalSearchTerm,
       onChange: handleSearchChange
     }
   ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ import_react.default.createElement(
@@ -1738,9 +1779,10 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   const inputDebounceRef = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
   const rowKeyRef = (0, import_react2.useRef)(/* @__PURE__ */ new WeakMap());
   const rowKeyCounterRef = (0, import_react2.useRef)(0);
+  const controlledBaselineLockedRef = (0, import_react2.useRef)(false);
   const initialSnapshot = (0, import_react2.useRef)(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;
@@ -1752,6 +1794,10 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   const draftValuesRef = (0, import_react2.useRef)(null);
   formValuesRef.current = formValues;
   formErrorsRef.current = formErrors;
+  const syncDirtyBaseline = (0, import_react2.useCallback)((nextValues) => {
+    initialSnapshot.current = deepClone(nextValues || {});
+    prevAutoSaveValues.current = deepClone(nextValues || {});
+  }, []);
   const fieldByName = (0, import_react2.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
     for (const field of fields) {
@@ -1828,6 +1874,11 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
     };
   }, []);
+  (0, import_react2.useEffect)(() => {
+    if (values == null) return;
+    if (controlledBaselineLockedRef.current) return;
+    syncDirtyBaseline(values);
+  }, [values, syncDirtyBaseline]);
   const isDirty = (0, import_react2.useMemo)(() => {
     return !deepEqual(formValues, initialSnapshot.current);
   }, [formValues]);
@@ -1946,6 +1997,50 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     },
     [fieldTypes]
   );
+  const setRepeaterSubFieldError = (0, import_react2.useCallback)(
+    (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 = (0, import_react2.useCallback)(
+    (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 = (0, import_react2.useCallback)(
     (name, value) => {
       const field = fieldByName.get(name);
@@ -1965,7 +2060,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   );
   const validateVisibleFields = (0, import_react2.useCallback)(
     (fieldSubset) => {
-      const toValidate = fieldSubset || visibleFields;
+      const toValidate = expandValidationFields(fieldSubset);
       const errors = {};
       let hasErrors = false;
       for (const field of toValidate) {
@@ -1985,52 +2080,54 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
+    [expandValidationFields, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
-  const runAsyncValidation = (0, import_react2.useCallback)(
-    (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 = (0, import_react2.useCallback)(
+    (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;
@@ -2041,50 +2138,128 @@ var FormBuilder = (0, import_react2.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 = (0, import_react2.useCallback)(
+  const runAsyncValidation = (0, import_react2.useCallback)(
     (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 = (0, import_react2.useCallback)(
+    (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);
+      }
+    },
+    [runAsyncValidationTarget]
+  );
+  const triggerAsyncValidation = (0, import_react2.useCallback)(
+    (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 = (0, import_react2.useCallback)(
+    (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;
     },
-    [fieldByName, runAsyncValidation]
+    [visibleFields, formValues, setRepeaterSubFieldError, updateErrors]
   );
   const commitValues = (0, import_react2.useCallback)(
     (nextValues) => {
       formValuesRef.current = nextValues;
       if (values != null) {
+        controlledBaselineLockedRef.current = true;
         if (onChange) onChange(nextValues);
       } else {
         setInternalValues(nextValues);
@@ -2102,7 +2277,8 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     [commitValues]
   );
   const handleFieldChange = (0, import_react2.useCallback)(
-    (name, value) => {
+    (name, value, options = {}) => {
+      const { clearNestedErrors = true } = options;
       const newValues = { ...formValuesRef.current, [name]: value };
       const queue = [name];
       const visited = /* @__PURE__ */ new Set();
@@ -2143,9 +2319,11 @@ var FormBuilder = (0, import_react2.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;
@@ -2214,7 +2392,7 @@ var FormBuilder = (0, import_react2.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([
@@ -2229,6 +2407,7 @@ var FormBuilder = (0, import_react2.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);
@@ -2268,7 +2447,7 @@ var FormBuilder = (0, import_react2.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 = (0, import_react2.useCallback)(async () => {
     if (!isMultiStep) return;
@@ -2280,7 +2459,7 @@ var FormBuilder = (0, import_react2.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([
@@ -2305,7 +2484,7 @@ var FormBuilder = (0, import_react2.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 = (0, import_react2.useCallback)(() => {
     if (!isMultiStep) return;
     const prevStep = Math.max(currentStep - 1, 0);
@@ -2337,6 +2516,7 @@ var FormBuilder = (0, import_react2.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);
@@ -2349,30 +2529,6 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       replaceErrors(errors);
     }
   }));
-  const setRepeaterSubFieldError = (0, import_react2.useCallback)(
-    (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);
@@ -2852,12 +3008,13 @@ var FormBuilder = (0, import_react2.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);
           }
@@ -2867,13 +3024,24 @@ var FormBuilder = (0, import_react2.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__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap: "xs" }, field.label && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { format: { fontWeight: "demibold" } }, field.label, isRequired ? " *" : ""), field.description && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { variant: "microcopy" }, field.description), rows.map((row, rowIdx) => /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { 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,
@@ -2882,6 +3050,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
             disabled: resolveDisabled(sf, formValues) || isDisabled,
             error: !!sfError,
             validationMessage: sfError || void 0,
+            ...validatingFields[validationKey] ? { loading: true } : {},
             ...sf.fieldProps || {}
           };
           let sfElement;
@@ -3310,9 +3479,212 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     formContent
   );
 });
+
+// src/common-components/AutoTag.js
+var import_react3 = __toESM(require("react"));
+var import_ui_extensions3 = require("@hubspot/ui-extensions");
+
+// src/utils/tagVariants.js
+var DEFAULT_VARIANT = "default";
+var DANGER_VARIANT = "danger";
+var ERROR_VARIANT = "error";
+var SUCCESS_MATCHERS = [
+  "active",
+  "success",
+  "succeeded",
+  "complete",
+  "completed",
+  "approved",
+  "won",
+  "healthy",
+  "enabled",
+  "connected",
+  "paid",
+  "live",
+  "published",
+  "available",
+  "synced",
+  "resolved"
+];
+var WARNING_MATCHERS = [
+  "warning",
+  "at risk",
+  "risky",
+  "pending",
+  "paused",
+  "pause",
+  "on hold",
+  "hold",
+  "review",
+  "expiring",
+  "trial",
+  "in progress",
+  "awaiting",
+  "scheduled"
+];
+var DANGER_MATCHERS = [
+  "danger",
+  "error",
+  "failed",
+  "failure",
+  "inactive",
+  "disabled",
+  "blocked",
+  "cancelled",
+  "canceled",
+  "rejected",
+  "denied",
+  "churned",
+  "lost",
+  "overdue",
+  "expired",
+  "offline",
+  "deleted",
+  "archived",
+  "unpaid"
+];
+var INFO_MATCHERS = [
+  "info",
+  "new",
+  "queued",
+  "processing",
+  "progress",
+  "upcoming",
+  "draft",
+  "open"
+];
+var normalizeTagValue = (value) => {
+  if (value == null) return "";
+  if (typeof value === "boolean") return value ? "true" : "false";
+  return String(value).trim().toLowerCase().replace(/[_-]+/g, " ").replace(/\s+/g, " ");
+};
+var matchesAny = (value, matchers) => matchers.some((matcher) => {
+  if (value === matcher) return true;
+  return ` ${value} `.includes(` ${matcher} `);
+});
+var getSemanticVariant = (value, options = {}) => {
+  const normalized = normalizeTagValue(value);
+  const fallback = options.fallback || DEFAULT_VARIANT;
+  if (!normalized) return fallback;
+  if (options.overrides) {
+    const overrideKey = Object.keys(options.overrides).find(
+      (key) => normalizeTagValue(key) === normalized
+    );
+    if (overrideKey) return options.overrides[overrideKey];
+  }
+  if (normalized === "true") return "success";
+  if (normalized === "false") return fallback;
+  if (matchesAny(normalized, SUCCESS_MATCHERS)) return "success";
+  if (matchesAny(normalized, DANGER_MATCHERS)) return DANGER_VARIANT;
+  if (matchesAny(normalized, WARNING_MATCHERS)) return "warning";
+  if (matchesAny(normalized, INFO_MATCHERS)) return "info";
+  return fallback;
+};
+var getAutoTagVariant = (value, options = {}) => {
+  const semanticVariant = getSemanticVariant(value, options);
+  return semanticVariant === DANGER_VARIANT ? ERROR_VARIANT : semanticVariant;
+};
+var getAutoStatusTagVariant = (value, options = {}) => getSemanticVariant(value, options);
+var getAutoTagDisplayValue = (value) => {
+  if (typeof value === "boolean") return value ? "True" : "False";
+  return value;
+};
+var DEFAULT_STATUS_TAG_COLOR_ORDER = [
+  "success",
+  "warning",
+  "danger",
+  "error",
+  "info",
+  "default"
+];
+var createStatusTagSortComparator = (options = {}) => {
+  const {
+    variantOrder = DEFAULT_STATUS_TAG_COLOR_ORDER,
+    overrides,
+    fallback,
+    getLabel
+  } = options;
+  const variantIndex = (variant) => {
+    const idx = variantOrder.indexOf(variant);
+    return idx === -1 ? variantOrder.length : idx;
+  };
+  const labelOf = (value) => {
+    if (getLabel) return String(getLabel(value) ?? "");
+    if (value == null) return "";
+    return String(getAutoTagDisplayValue(value) ?? "");
+  };
+  return (aVal, bVal) => {
+    const aVariant = getSemanticVariant(aVal, { overrides, fallback });
+    const bVariant = getSemanticVariant(bVal, { overrides, fallback });
+    const diff = variantIndex(aVariant) - variantIndex(bVariant);
+    if (diff !== 0) return diff;
+    return labelOf(aVal).localeCompare(labelOf(bVal));
+  };
+};
+
+// src/common-components/AutoTag.js
+var AutoTag = ({
+  value,
+  tag,
+  children,
+  variant,
+  overrides,
+  fallback,
+  ...props
+}) => {
+  const resolvedValue = value ?? tag ?? children;
+  const displayValue = children ?? getAutoTagDisplayValue(resolvedValue);
+  const resolvedVariant = variant || getAutoTagVariant(resolvedValue, {
+    overrides,
+    fallback
+  });
+  return import_react3.default.createElement(
+    import_ui_extensions3.Tag,
+    { variant: resolvedVariant, ...props },
+    displayValue
+  );
+};
+
+// src/common-components/AutoStatusTag.js
+var import_react4 = __toESM(require("react"));
+var import_ui_extensions4 = require("@hubspot/ui-extensions");
+var AutoStatusTag = ({
+  value,
+  status,
+  children,
+  variant,
+  overrides,
+  fallback,
+  ...props
+}) => {
+  const resolvedValue = value ?? status ?? children;
+  const displayValue = children ?? getAutoTagDisplayValue(resolvedValue);
+  const resolvedVariant = variant || getAutoStatusTagVariant(resolvedValue, {
+    overrides,
+    fallback
+  });
+  return import_react4.default.createElement(
+    import_ui_extensions4.StatusTag,
+    { variant: resolvedVariant, ...props },
+    displayValue
+  );
+};
+
+// src/common-components/KeyValueList.js
+var import_react5 = __toESM(require("react"));
+var import_ui_extensions5 = require("@hubspot/ui-extensions");
+
+// src/common-components/SectionHeader.js
+var import_react6 = __toESM(require("react"));
+var import_ui_extensions6 = require("@hubspot/ui-extensions");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AutoStatusTag,
+  AutoTag,
   DataTable,
   FormBuilder,
+  createStatusTagSortComparator,
+  getAutoStatusTagVariant,
+  getAutoTagVariant,
   useFormPrefill
 });