hs-uix 1.0.4 → 1.2.0

package/dist/index.js

@@ -91,12 +91,19 @@ var computeAutoWidths = (columns, data) => {
   columns.forEach((col) => {
     if (col.width && col.cellWidth) return;
     const values = sample.map((row) => row[col.field]).filter((v) => v != null);
-    const strings = values.map((v) => String(v));
+    const strings = values.map((v) => {
+      const s = String(v);
+      const truncLen = typeof col.truncate === "number" ? col.truncate : col.truncate && typeof col.truncate === "object" ? col.truncate.maxLength : null;
+      return truncLen && s.length > truncLen ? s.slice(0, truncLen) : s;
+    });
     let widthHint = null;
     let cellWidthHint = null;
     if (col.editable && col.editType && NARROW_EDIT_TYPES.has(col.editType)) {
       cellWidthHint = "min";
     }
+    if (col.truncate === true) {
+      cellWidthHint = cellWidthHint || "min";
+    }
     if (strings.length > 0) {
       const lengths = strings.map((s) => s.length);
       const maxLen = Math.max(...lengths);
@@ -162,12 +169,16 @@ var DataTable = ({
   // enable fuzzy matching via Fuse.js
   fuzzyOptions,
   // custom Fuse.js options (threshold, distance, etc.)
+  showSearch = true,
+  // show the SearchInput in the toolbar
   // Filters
   filters = [],
   showFilterBadges = true,
   // show active filter chips/badges
   showClearFiltersButton = true,
   // show "Clear all" filters reset button
+  filterInlineLimit = 2,
+  // number of filters shown inline before overflow
   // Pagination
   pageSize = 10,
   maxVisiblePageButtons,
@@ -249,6 +260,8 @@ var DataTable = ({
   // optional key to force clear uncontrolled selection memory
   resetSelectionOnQueryChange = true,
   // clear uncontrolled selection on search/filter/sort changes
+  showSelectionBar = true,
+  // show the selection action bar when rows are selected
   recordLabel,
   // { singular: "Contact", plural: "Contacts" } — defaults to Record/Records
   // -----------------------------------------------------------------------
@@ -269,11 +282,31 @@ var DataTable = ({
   // (row, field, newValue) => void
   onRowEditInput,
   // optional live-input callback: (row, field, inputValue) => void
+  onEditStart,
+  // (row, field, currentValue) => void — fires when editing begins
+  onEditCancel,
+  // (row, field) => void — fires when editing is cancelled without commit
   // -----------------------------------------------------------------------
   // Auto-width
   // -----------------------------------------------------------------------
-  autoWidth = true
+  autoWidth = true,
   // auto-compute column widths from content analysis
+  // -----------------------------------------------------------------------
+  // Labels / i18n
+  // -----------------------------------------------------------------------
+  labels,
+  // override hardcoded UI strings for i18n
+  // -----------------------------------------------------------------------
+  // Render overrides (Phase 3 — full replacement escape hatches)
+  // -----------------------------------------------------------------------
+  renderSelectionBar,
+  // ({ selectedIds, selectedCount, displayCount, countLabel, onSelectAll, onDeselectAll, selectionActions }) => ReactNode
+  renderEmptyState,
+  // ({ title, message }) => ReactNode
+  renderLoadingState,
+  // ({ label }) => ReactNode
+  renderErrorState
+  // ({ error, title, message }) => ReactNode
 }) => {
   const initialSortState = (0, import_react.useMemo)(() => {
     return normalizeSortState(columns, defaultSort);
@@ -507,11 +540,11 @@ var DataTable = ({
       const type = filter.type || "select";
       const prefix = filter.chipLabel || filter.placeholder || filter.name;
       if (type === "multiselect") {
-        const labels = value.map((v) => {
+        const labels2 = value.map((v) => {
           var _a;
           return ((_a = filter.options.find((o) => o.value === v)) == null ? void 0 : _a.label) || v;
         }).join(", ");
-        chips.push({ key: filter.name, label: `${prefix}: ${labels}` });
+        chips.push({ key: filter.name, label: `${prefix}: ${labels2}` });
       } else if (type === "dateRange") {
         const parts = [];
         if (value.from) parts.push(`from ${formatDateChip(value.from)}`);
@@ -552,7 +585,17 @@ var DataTable = ({
   const countLabel = (n) => n === 1 ? singularLabel : pluralLabel;
   const resolvedEmptyTitle = emptyTitle || "No results found";
   const resolvedEmptyMessage = emptyMessage || `No ${pluralLabel} match your search or filter criteria.`;
-  const resolvedLoadingLabel = `Loading ${pluralLabel}...`;
+  const resolvedSelectedLabel = (labels == null ? void 0 : labels.selected) || ((count, label) => `${count}\xA0${label}\xA0selected`);
+  const resolvedSelectAllLabel = (labels == null ? void 0 : labels.selectAll) || ((count, label) => `Select all ${count} ${label}`);
+  const resolvedDeselectAllLabel = (labels == null ? void 0 : labels.deselectAll) || "Deselect all";
+  const resolvedFiltersButtonLabel = (labels == null ? void 0 : labels.filtersButton) || "Filters";
+  const resolvedClearAllLabel = (labels == null ? void 0 : labels.clearAll) || "Clear all";
+  const resolvedDateFromLabel = (labels == null ? void 0 : labels.dateFrom) || "From";
+  const resolvedDateToLabel = (labels == null ? void 0 : labels.dateTo) || "To";
+  const resolvedLoadingLabel = (labels == null ? void 0 : labels.loading) || `Loading ${pluralLabel}...`;
+  const resolvedErrorTitle = (labels == null ? void 0 : labels.errorTitle) || "Something went wrong.";
+  const resolvedErrorMessage = (labels == null ? void 0 : labels.errorMessage) || "An error occurred while loading data.";
+  const resolvedRetryMessage = (labels == null ? void 0 : labels.retryMessage) || "Please try again.";
   const recordCountLabel = rowCountText ? rowCountText(shownOnPageCount, displayCount) : displayCount === totalDataCount ? `${totalDataCount} ${countLabel(totalDataCount)}` : `${displayCount} of ${totalDataCount} ${countLabel(totalDataCount)}`;
   const [internalSelectedIds, setInternalSelectedIds] = (0, import_react.useState)(/* @__PURE__ */ new Set());
   const selectionResetRef = (0, import_react.useRef)("");
@@ -641,7 +684,11 @@ var DataTable = ({
     setEditingCell({ rowId, field });
     setEditValue(currentValue);
     setEditError(null);
-  }, []);
+    if (onEditStart) {
+      const row = data.find((r) => r[rowIdField] === rowId);
+      if (row) onEditStart(row, field, currentValue);
+    }
+  }, [onEditStart, data, rowIdField]);
   const commitEdit = (0, import_react.useCallback)((row, field, value) => {
     const col = columns.find((c) => c.field === field);
     if (col == null ? void 0 : col.editValidate) {
@@ -663,6 +710,7 @@ var DataTable = ({
     const commit = (val) => commitEdit(row, col.field, val);
     const exitEdit = () => {
       if (editError) return;
+      if (onEditCancel) onEditCancel(row, col.field);
       setEditingCell(null);
       setEditValue(null);
     };
@@ -829,20 +877,26 @@ var DataTable = ({
     const rawStr = String(rawValue ?? "");
     if (col.truncate && rawStr.length > 0) {
       if (col.truncate === true) {
-        const content2 = col.renderCell ? col.renderCell(rawValue, row) : rawStr;
+        if (col.renderCell) {
+          const content2 = col.renderCell(rawValue, row);
+          if (col.editable) {
+            return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
+          }
+          return content2;
+        }
         if (col.editable) {
-          return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { truncate: { tooltipText: rawStr } }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--"));
+          return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { truncate: { tooltipText: rawStr } }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, rawStr || "--"));
         }
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { truncate: { tooltipText: rawStr } }, content2);
+        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { truncate: { tooltipText: rawStr } }, rawStr);
       }
-      const maxLen = col.truncate.maxLength || 100;
+      const maxLen = typeof col.truncate === "number" ? col.truncate : col.truncate.maxLength || 100;
       if (rawStr.length > maxLen) {
         const truncatedStr = rawStr.slice(0, maxLen) + "\u2026";
-        const truncatedContent = col.renderCell ? col.renderCell(truncatedStr, row) : truncatedStr;
+        const content2 = col.renderCell ? col.renderCell(truncatedStr, row) : truncatedStr;
         if (col.editable) {
-          return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, truncatedContent || "--");
+          return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Link, { variant: "dark", onClick: () => startEditing(rowId, col.field, rawValue) }, content2 || "--");
         }
-        return /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { truncate: { tooltipText: rawStr } }, truncatedContent || "--");
+        return col.renderCell ? content2 : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { truncate: { tooltipText: rawStr } }, content2 || "--");
       }
     }
     const content = col.renderCell ? col.renderCell(rawValue, row) : rawValue;
@@ -882,7 +936,7 @@ var DataTable = ({
         {
           name: `filter-${filter.name}-from`,
           label: "",
-          placeholder: "From",
+          placeholder: resolvedDateFromLabel,
           format: "medium",
           value: rangeVal.from,
           onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, from: val })
@@ -893,7 +947,7 @@ var DataTable = ({
           size: "sm",
           name: `filter-${filter.name}-to`,
           label: "",
-          placeholder: "To",
+          placeholder: resolvedDateToLabel,
           format: "medium",
           value: rangeVal.to,
           onChange: (val) => handleFilterChange(filter.name, { ...rangeVal, to: val })
@@ -916,7 +970,7 @@ 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" }, 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: "center", gap: "sm", wrap: "wrap" }, showSearch && searchFields.length > 0 && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.SearchInput,
     {
       name: "datatable-search",
@@ -924,7 +978,7 @@ var DataTable = ({
       value: searchTerm,
       onChange: handleSearchChange
     }
-  ), filters.slice(0, 2).map(renderFilterControl), filters.length > 2 && /* @__PURE__ */ import_react.default.createElement(
+  ), filters.slice(0, filterInlineLimit).map(renderFilterControl), filters.length > filterInlineLimit && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.Button,
     {
       variant: "transparent",
@@ -932,16 +986,25 @@ var DataTable = ({
       onClick: () => setShowMoreFilters((prev) => !prev)
     },
     /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: "filter", size: "sm" }),
-    " Filters"
-  )), showMoreFilters && filters.length > 2 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, filters.slice(2).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), showClearFiltersButton && /* @__PURE__ */ import_react.default.createElement(
+    " ",
+    resolvedFiltersButtonLabel
+  )), showMoreFilters && filters.length > filterInlineLimit && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "end", gap: "sm", wrap: "wrap" }, filters.slice(filterInlineLimit).map(renderFilterControl)), activeChips.length > 0 && (showFilterBadges || showClearFiltersButton) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showFilterBadges && activeChips.map((chip) => /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Tag, { key: chip.key, variant: "default", onDelete: () => handleFilterRemove(chip.key) }, chip.label)), showClearFiltersButton && /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.Button,
     {
       variant: "transparent",
       size: "extra-small",
       onClick: () => handleFilterRemove("all")
     },
-    "Clear all"
-  )))), showRowCount && displayCount > 0 && !(selectable && selectedIds.size > 0) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), selectable && selectedIds.size > 0 && /* @__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: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { inline: true, format: { fontWeight: "demibold" } }, selectedIds.size, "\xA0", countLabel(selectedIds.size), "\xA0selected"), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, "Select all ", displayCount, " ", countLabel(displayCount)), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, "Deselect all"), selectionActions.map((action, i) => /* @__PURE__ */ import_react.default.createElement(
+    resolvedClearAllLabel
+  )))), showRowCount && displayCount > 0 && !(showSelectionBar && selectable && selectedIds.size > 0) && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), showSelectionBar && selectable && selectedIds.size > 0 && (renderSelectionBar ? renderSelectionBar({
+    selectedIds,
+    selectedCount: selectedIds.size,
+    displayCount,
+    countLabel,
+    onSelectAll: handleSelectAllRows,
+    onDeselectAll: handleDeselectAll,
+    selectionActions
+  }) : /* @__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: "row", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { inline: true, format: { fontWeight: "demibold" } }, typeof resolvedSelectedLabel === "function" ? resolvedSelectedLabel(selectedIds.size, countLabel(selectedIds.size)) : resolvedSelectedLabel), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "transparent", size: "extra-small", onClick: handleSelectAllRows }, typeof resolvedSelectAllLabel === "function" ? resolvedSelectAllLabel(displayCount, countLabel(displayCount)) : resolvedSelectAllLabel), /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Button, { variant: "transparent", size: "extra-small", onClick: handleDeselectAll }, resolvedDeselectAllLabel), selectionActions.map((action, i) => /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.Button,
     {
       key: i,
@@ -952,7 +1015,11 @@ var DataTable = ({
     action.icon && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Icon, { name: action.icon, size: "sm" }),
     " ",
     action.label
-  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel)))), loading ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.LoadingSpinner, { label: resolvedLoadingLabel, layout: "centered" }) : error ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.ErrorState, { title: typeof error === "string" ? error : "Something went wrong." }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, typeof error === "string" ? "Please try again." : "An error occurred while loading data.")) : displayRows.length === 0 ? /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, resolvedEmptyMessage))) : /* @__PURE__ */ import_react.default.createElement(
+  )))), showRowCount && displayCount > 0 && /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Box, { flex: 1, alignSelf: "center" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "row", justify: "end" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, { variant: "microcopy", format: rowCountBold ? { fontWeight: "bold" } : void 0 }, recordCountLabel))))), loading ? renderLoadingState ? renderLoadingState({ label: resolvedLoadingLabel }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.LoadingSpinner, { label: resolvedLoadingLabel, layout: "centered" }) : error ? renderErrorState ? renderErrorState({
+    error,
+    title: typeof error === "string" ? error : resolvedErrorTitle,
+    message: typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage
+  }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.ErrorState, { title: typeof error === "string" ? error : resolvedErrorTitle }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, typeof error === "string" ? resolvedRetryMessage : resolvedErrorMessage)) : displayRows.length === 0 ? renderEmptyState ? renderEmptyState({ title: resolvedEmptyTitle, message: resolvedEmptyMessage }) : /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.EmptyState, { title: resolvedEmptyTitle, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_ui_extensions.Text, null, resolvedEmptyMessage))) : /* @__PURE__ */ import_react.default.createElement(
     import_ui_extensions.Table,
     {
       bordered,
@@ -1135,7 +1202,6 @@ var runDefaultFieldValidator = (value, field, allValues) => {
       if (!isTimeValueObject(value)) return `${errorPrefix} has an invalid time`;
       break;
     case "datetime": {
-      if (isDateValueObject(value)) break;
       if (!isPlainObject(value)) return `${errorPrefix} has an invalid date/time`;
       const hasDate = value.date !== void 0;
       const hasTime = value.time !== void 0;
@@ -1201,12 +1267,14 @@ var collectAsyncValidatorPromises = (value, field, allValues, context) => {
 };
 var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   const includeCustomValidators = options.includeCustomValidators !== false;
-  if (field.type === "display" || field.type === "crmPropertyList" || field.type === "crmAssociationPropertyList") return null;
+  const msg = options.messages || {};
+  if (field.type === "display" || 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);
   if (isRequired && empty) {
-    return `${field.label} is required`;
+    const fn = msg.required || ((label) => `${label} is required`);
+    return typeof fn === "function" ? fn(field.label) : fn;
   }
   if (empty) return null;
   if (field.useDefaultValidators !== false) {
@@ -1215,23 +1283,27 @@ var runValidators = (value, field, allValues, fieldTypes, options = {}) => {
   }
   if (field.pattern && typeof value === "string") {
     if (!field.pattern.test(value)) {
-      return field.patternMessage || "Invalid format";
+      return field.patternMessage || msg.invalidFormat || "Invalid format";
     }
   }
   if (typeof value === "string") {
     if (field.minLength != null && value.length < field.minLength) {
-      return `Must be at least ${field.minLength} characters`;
+      const fn = msg.minLength || ((min) => `Must be at least ${min} characters`);
+      return typeof fn === "function" ? fn(field.minLength) : fn;
     }
     if (field.maxLength != null && value.length > field.maxLength) {
-      return `Must be no more than ${field.maxLength} characters`;
+      const fn = msg.maxLength || ((max) => `Must be no more than ${max} characters`);
+      return typeof fn === "function" ? fn(field.maxLength) : fn;
     }
   }
   if (typeof value === "number") {
     if (field.min != null && value < field.min) {
-      return `Must be at least ${field.min}`;
+      const fn = msg.minValue || ((min) => `Must be at least ${min}`);
+      return typeof fn === "function" ? fn(field.min) : fn;
     }
     if (field.max != null && value > field.max) {
-      return `Must be no more than ${field.max}`;
+      const fn = msg.maxValue || ((max) => `Must be no more than ${max}`);
+      return typeof fn === "function" ? fn(field.max) : fn;
     }
   }
   if (field.type === "date" && isDateValueObject(value)) {
@@ -1343,6 +1415,8 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     // (values, { reset, rawValues }) => void | Promise
     transformValues,
     // (values) => values — reshape before submit
+    transformInitialValues,
+    // (rawInitialValues) => values — reshape raw data on load
     onBeforeSubmit,
     // (values) => boolean | Promise<boolean> — intercept submit
     onSubmitSuccess,
@@ -1437,8 +1511,18 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     // string — warning alert when readOnly
     alerts,
     // { addAlert, readOnlyTitle, errorTitle, successTitle }
-    errors: controlledErrors
+    errors: controlledErrors,
     // controlled validation errors
+    showReadOnlyAlert = true,
+    // show warning Alert when readOnly is true
+    showInlineAlerts = true,
+    // show inline form-level error/success Alerts
+    renderReadOnlyAlert,
+    // (context: { title, message }) => ReactNode — custom readOnly alert renderer
+    renderFieldError,
+    // (error: string, field: object) => ReactNode — custom field error renderer
+    defaultCurrency = "USD"
+    // form-level default ISO 4217 currency code for currency fields
   } = props;
   const {
     onDirtyChange,
@@ -1450,6 +1534,23 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   const cancelButtonLabel = (labels == null ? void 0 : labels.cancel) || "Cancel";
   const backButtonLabel = (labels == null ? void 0 : labels.back) || "Back";
   const nextButtonLabel = (labels == null ? void 0 : labels.next) || "Next";
+  const requiredMessage = (labels == null ? void 0 : labels.required) || ((label) => `${label} is required`);
+  const invalidFormatMessage = (labels == null ? void 0 : labels.invalidFormat) || "Invalid format";
+  const minLengthMessage = (labels == null ? void 0 : labels.minLength) || ((min) => `Must be at least ${min} characters`);
+  const maxLengthMessage = (labels == null ? void 0 : labels.maxLength) || ((max) => `Must be no more than ${max} characters`);
+  const minValueMessage = (labels == null ? void 0 : labels.minValue) || ((min) => `Must be at least ${min}`);
+  const maxValueMessage = (labels == null ? void 0 : labels.maxValue) || ((max) => `Must be no more than ${max}`);
+  const dependentPropertiesLabel = (labels == null ? void 0 : labels.dependentProperties) || "Dependent properties";
+  const repeaterAddLabel = (labels == null ? void 0 : labels.repeaterAdd) || "Add";
+  const repeaterRemoveLabel = (labels == null ? void 0 : labels.repeaterRemove) || "Remove";
+  const validationMessages = labels ? {
+    required: requiredMessage,
+    invalidFormat: invalidFormatMessage,
+    minLength: minLengthMessage,
+    maxLength: maxLengthMessage,
+    minValue: minValueMessage,
+    maxValue: maxValueMessage
+  } : void 0;
   const addAlert = alerts == null ? void 0 : alerts.addAlert;
   const readOnlyTitle = (alerts == null ? void 0 : alerts.readOnlyTitle) || "Read Only";
   const errorTitle = (alerts == null ? void 0 : alerts.errorTitle) || "Error";
@@ -1479,12 +1580,27 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     prevSuccessRef.current = formSuccess;
   }, [addAlert, formSuccess, successTitle]);
   const computeInitialValues = () => {
+    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 === "fieldGroup" && field.items && field.fields) {
+        for (const item of field.items) {
+          const subFields = field.fields(item);
+          for (const sf of subFields) {
+            const plugin2 = fieldTypes && fieldTypes[sf.type];
+            const emptyValue2 = plugin2 && plugin2.getEmptyValue ? plugin2.getEmptyValue() : getEmptyValue(sf);
+            let init2 = resolved && resolved[sf.name] !== void 0 ? resolved[sf.name] : sf.defaultValue !== void 0 ? sf.defaultValue : emptyValue2;
+            if (sf.transformIn) init2 = sf.transformIn(init2);
+            vals[sf.name] = init2;
+          }
+        }
+        continue;
+      }
       const plugin = fieldTypes && fieldTypes[field.type];
       const emptyValue = plugin && plugin.getEmptyValue ? plugin.getEmptyValue() : getEmptyValue(field);
-      const init = initialValues && initialValues[field.name] !== void 0 ? initialValues[field.name] : field.defaultValue !== void 0 ? field.defaultValue : emptyValue;
+      let init = resolved && resolved[field.name] !== void 0 ? resolved[field.name] : field.defaultValue !== void 0 ? field.defaultValue : emptyValue;
+      if (field.transformIn) init = field.transformIn(init);
       vals[field.name] = init;
     }
     return vals;
@@ -1517,7 +1633,14 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   formErrorsRef.current = formErrors;
   const fieldByName = (0, import_react2.useMemo)(() => {
     const map = /* @__PURE__ */ new Map();
-    for (const field of fields) map.set(field.name, field);
+    for (const field of fields) {
+      map.set(field.name, field);
+      if (field.type === "fieldGroup" && field.items && field.fields) {
+        for (const item of field.items) {
+          for (const sf of field.fields(item)) map.set(sf.name, sf);
+        }
+      }
+    }
     return map;
   }, [fields]);
   const isDev = typeof process === "undefined" || !process.env || process.env.NODE_ENV !== "production";
@@ -1688,7 +1811,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         const rowValues = { ...allValues, [field.name]: rows };
         subFields.forEach((subField) => {
           if (subField.visible && !subField.visible(rowValues)) return;
-          const err = runValidators(row == null ? void 0 : row[subField.name], subField, rowValues, fieldTypes);
+          const err = runValidators(row == null ? void 0 : row[subField.name], subField, rowValues, fieldTypes, { messages: validationMessages });
           if (!err) return;
           const key = getRepeaterErrorKey(field.name, rowIdx, subField.name);
           errors[key] = err;
@@ -1715,9 +1838,9 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         );
         return repeaterResult.errors[name] || null;
       }
-      return runValidators(value != null ? value : formValues[name], field, formValues, fieldTypes);
+      return runValidators(value != null ? value : formValues[name], field, formValues, fieldTypes, { messages: validationMessages });
     },
-    [fieldByName, formValues, validateRepeaterField, fieldTypes]
+    [fieldByName, formValues, validateRepeaterField, fieldTypes, validationMessages]
   );
   const validateVisibleFields = (0, import_react2.useCallback)(
     (fieldSubset) => {
@@ -1733,7 +1856,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
           }
           continue;
         }
-        const err = runValidators(formValues[field.name], field, formValues, fieldTypes);
+        const err = runValidators(formValues[field.name], field, formValues, fieldTypes, { messages: validationMessages });
         if (err) {
           errors[field.name] = err;
           hasErrors = true;
@@ -1741,14 +1864,14 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       }
       return { errors, hasErrors };
     },
-    [visibleFields, formValues, validateRepeaterField, fieldTypes]
+    [visibleFields, 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 });
+      const syncError = runValidators(val, field, formValues, fieldTypes, { includeCustomValidators: false, messages: validationMessages });
       const prevController = asyncAbortRef.current.get(name);
       if (prevController) prevController.abort();
       asyncAbortRef.current.delete(name);
@@ -1939,23 +2062,27 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   );
   const handleFieldInput = (0, import_react2.useCallback)(
     (name, value) => {
+      handleFieldChange(name, value);
       if (!validateOnChange) return;
       const err = validateField(name, value);
       updateErrors({ [name]: err });
     },
-    [validateOnChange, validateField, updateErrors]
+    [validateOnChange, validateField, updateErrors, handleFieldChange]
   );
   const handleFieldBlur = (0, import_react2.useCallback)(
     (name, value) => {
-      if (!validateOnBlur) return;
       const resolvedValue = value != null ? value : formValuesRef.current[name];
+      if (value != null && value !== formValuesRef.current[name]) {
+        handleFieldChange(name, value);
+      }
+      if (!validateOnBlur) return;
       const err = validateField(name, resolvedValue);
       updateErrors({ [name]: err });
       if (!err) {
         triggerAsyncValidation(name, resolvedValue);
       }
     },
-    [validateOnBlur, validateField, updateErrors, triggerAsyncValidation]
+    [validateOnBlur, validateField, updateErrors, triggerAsyncValidation, handleFieldChange]
   );
   const handleSubmit = (0, import_react2.useCallback)(
     async (e) => {
@@ -1988,8 +2115,17 @@ var FormBuilder = (0, import_react2.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")) continue;
-        rawValues[key] = formValues[key];
+        if (f && (f.type === "display" || 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) {
+        if (f.type !== "fieldGroup" || !f.items || !f.fields) continue;
+        for (const item of f.items) {
+          for (const sf of f.fields(item)) {
+            if (formValues[sf.name] === void 0) continue;
+            rawValues[sf.name] = sf.transformOut ? sf.transformOut(formValues[sf.name]) : formValues[sf.name];
+          }
+        }
       }
       const submitValues = transformValues ? transformValues(rawValues) : rawValues;
       if (onBeforeSubmit) {
@@ -2117,6 +2253,12 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     [replaceErrors]
   );
   const renderField = (field) => {
+    const fieldError = formErrors[field.name] || null;
+    const rendered = renderFieldInner(field);
+    if (!renderFieldError || !fieldError) return rendered;
+    return /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, rendered, renderFieldError(fieldError, field));
+  };
+  const renderFieldInner = (field) => {
     const fieldValue = formValues[field.name];
     const fieldError = formErrors[field.name] || null;
     const hasError = !!fieldError;
@@ -2126,10 +2268,125 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     const fieldOnChange = field.debounce ? (v) => handleDebouncedFieldChange(field.name, v) : (v) => handleFieldChange(field.name, v);
     if (field.type === "display") {
       if (field.render) {
-        return field.render({ allValues: formValues });
+        return field.render({
+          allValues: formValues,
+          setFieldValue: (name, value) => handleFieldChange(name, value),
+          setFieldError: (name, message) => updateErrors({ [name]: message })
+        });
       }
       return null;
     }
+    if (field.type === "fieldGroup") {
+      const items = field.items || [];
+      const fieldsFn = field.fields;
+      if (!fieldsFn) return null;
+      const groupColumns = field.columns || 1;
+      const showItemLabel = field.showItemLabel !== false;
+      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), field.description && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { variant: "microcopy" }, field.description), items.map((item, itemIdx) => {
+        const subFields = fieldsFn(item);
+        return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { key: item.key || itemIdx, direction: "row", gap: "xs", align: "end" }, showItemLabel && item.label && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 1 }, itemIdx === 0 ? /* @__PURE__ */ import_react2.default.createElement(
+          import_ui_extensions2.Input,
+          {
+            name: `_fieldGroup-label-${field.name}-${itemIdx}`,
+            label: "\xA0",
+            value: item.label,
+            readOnly: true,
+            disabled: true
+          }
+        ) : /* @__PURE__ */ import_react2.default.createElement(
+          import_ui_extensions2.Input,
+          {
+            name: `_fieldGroup-label-${field.name}-${itemIdx}`,
+            value: item.label,
+            readOnly: true,
+            disabled: true
+          }
+        )), subFields.map((sf) => {
+          const sfValue = formValues[sf.name];
+          const sfError = formErrors[sf.name] || null;
+          const sfLabel = itemIdx === 0 ? sf.label : void 0;
+          const sfReadOnly = sf.readOnly || formReadOnly;
+          const sfDisabled = disabled || sf.disabled || formReadOnly;
+          const sfOnChange = sf.debounce ? (v) => handleDebouncedFieldChange(sf.name, v) : (v) => handleFieldChange(sf.name, v);
+          const sfProps = {
+            name: sf.name,
+            label: sfLabel,
+            placeholder: sf.placeholder,
+            description: itemIdx === 0 ? sf.description : void 0,
+            readOnly: sfReadOnly,
+            disabled: sfDisabled,
+            error: !!sfError,
+            validationMessage: sfError || void 0,
+            ...sf.fieldProps || {}
+          };
+          let sfElement;
+          switch (sf.type) {
+            case "select":
+              sfElement = /* @__PURE__ */ import_react2.default.createElement(
+                import_ui_extensions2.Select,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  options: resolveOptions(sf, formValues),
+                  onChange: sfOnChange
+                }
+              );
+              break;
+            case "number":
+              sfElement = /* @__PURE__ */ import_react2.default.createElement(
+                import_ui_extensions2.NumberInput,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  onChange: sfOnChange,
+                  onBlur: (v) => handleFieldBlur(sf.name, v)
+                }
+              );
+              break;
+            case "toggle":
+              sfElement = /* @__PURE__ */ import_react2.default.createElement(
+                import_ui_extensions2.Toggle,
+                {
+                  name: sf.name,
+                  label: sfLabel || sf.label,
+                  checked: !!sfValue,
+                  size: sf.size || "md",
+                  labelDisplay: sf.labelDisplay || "top",
+                  readonly: sfReadOnly,
+                  disabled: sfDisabled,
+                  onChange: sfOnChange,
+                  ...sf.fieldProps || {}
+                }
+              );
+              break;
+            case "time":
+              sfElement = /* @__PURE__ */ import_react2.default.createElement(
+                import_ui_extensions2.TimeInput,
+                {
+                  ...sfProps,
+                  value: sfValue,
+                  interval: sf.interval,
+                  onChange: sfOnChange,
+                  onBlur: (v) => handleFieldBlur(sf.name, v)
+                }
+              );
+              break;
+            default:
+              sfElement = /* @__PURE__ */ import_react2.default.createElement(
+                import_ui_extensions2.Input,
+                {
+                  ...sfProps,
+                  value: sfValue || "",
+                  onChange: sfOnChange,
+                  onInput: (v) => handleFieldInput(sf.name, v),
+                  onBlur: (v) => handleFieldBlur(sf.name, v)
+                }
+              );
+          }
+          return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { key: sf.name, flex: 1 }, sfElement);
+        }));
+      }));
+    }
     if (field.type === "crmPropertyList") {
       return /* @__PURE__ */ import_react2.default.createElement(
         import_crm.CrmPropertyList,
@@ -2183,7 +2440,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       readOnly: isReadOnly,
       disabled: isDisabled,
       error: hasError,
-      validationMessage: fieldError || void 0,
+      validationMessage: renderFieldError ? void 0 : fieldError || void 0,
       ...field.loading || validatingFields[field.name] ? { loading: true } : {},
       ...field.fieldProps || {}
     };
@@ -2253,7 +2510,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
           import_ui_extensions2.CurrencyInput,
           {
             ...commonProps,
-            currency: field.currency || "USD",
+            currency: field.currency || defaultCurrency,
             value: fieldValue,
             min: field.min,
             max: field.max,
@@ -2431,8 +2688,8 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         const renderRemoveControl = repeaterProps.renderRemove;
         const renderMoveUpControl = repeaterProps.renderMoveUp;
         const renderMoveDownControl = repeaterProps.renderMoveDown;
-        const addLabel = repeaterProps.addLabel || "Add";
-        const removeLabel = repeaterProps.removeLabel || "Remove";
+        const addLabel = repeaterProps.addLabel || repeaterAddLabel;
+        const removeLabel = repeaterProps.removeLabel || repeaterRemoveLabel;
         const moveUpLabel = repeaterProps.moveUpLabel || "Up";
         const moveDownLabel = repeaterProps.moveDownLabel || "Down";
         const canEditRows = !isReadOnly && !isDisabled;
@@ -2466,7 +2723,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
         };
         const validateSubField = (rowIdx, subField, subValue, nextRows) => {
           const rowValues = { ...formValues, [field.name]: nextRows };
-          const err = runValidators(subValue, subField, rowValues, fieldTypes);
+          const err = runValidators(subValue, subField, rowValues, fieldTypes, { messages: validationMessages });
           setRepeaterSubFieldError(field.name, rowIdx, subField.name, err);
         };
         const handleSubFieldChange = (rowIdx, subField, subValue) => {
@@ -2584,7 +2841,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
   const renderDependentGroup = (parentField, dependents) => {
     const firstWithLabel = dependents.find((f) => getDependsOnLabel(f)) || dependents[0];
     const firstWithMessage = dependents.find((f) => getDependsOnMessage(f)) || dependents[0];
-    const groupLabel = getDependsOnLabel(firstWithLabel) || "Dependent properties";
+    const groupLabel = getDependsOnLabel(firstWithLabel) || dependentPropertiesLabel;
     const rawMessage = getDependsOnMessage(firstWithMessage);
     const tooltipMessage = typeof rawMessage === "function" ? rawMessage(parentField.label) : rawMessage || "";
     return /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tile, { key: `dep-${parentField.name}`, compact: true }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Text, { format: { fontWeight: "demibold" } }, groupLabel, " ", tooltipMessage && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Link, { inline: true, variant: "dark", overlay: /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Tooltip, null, tooltipMessage) }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Icon, { name: "info" })))), renderFieldSubset(dependents)));
@@ -2674,38 +2931,19 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     }
     return elements;
   };
-  const renderLegacyLayout = (fieldSubset) => {
+  const renderSingleColumnLayout = (fieldSubset) => {
     const fieldList = fieldSubset || visibleFields;
-    const rows = [];
-    let i = 0;
-    while (i < fieldList.length) {
-      const field = fieldList[i];
-      if (field.width === "half" && i + 1 < fieldList.length && fieldList[i + 1].width === "half" && !getDependsOnName(field)) {
-        rows.push({ type: "pair", fields: [fieldList[i], fieldList[i + 1]] });
-        i += 2;
-      } else {
-        rows.push({ type: "single", field });
-        i++;
-      }
-    }
     const elements = [];
     const processedDeps = /* @__PURE__ */ new Set();
-    for (const row of rows) {
-      if (row.type === "pair") {
-        elements.push(
-          /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { key: `pair-${row.fields[0].name}`, direction: "row", gap: "sm" }, /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 1 }, renderField(row.fields[0])), /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: 1 }, renderField(row.fields[1])))
-        );
-      } else {
-        const field = row.field;
-        if (processedDeps.has(field.name)) continue;
-        elements.push(
-          /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, { key: field.name }, renderField(field))
-        );
-        const dependents = getDependents(field);
-        if (dependents.length > 0) {
-          for (const dep of dependents) processedDeps.add(dep.name);
-          elements.push(renderDependentGroup(field, dependents));
-        }
+    for (const field of fieldList) {
+      if (processedDeps.has(field.name)) continue;
+      elements.push(
+        /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, { key: field.name }, renderField(field))
+      );
+      const dependents = getDependents(field);
+      if (dependents.length > 0) {
+        for (const dep of dependents) processedDeps.add(dep.name);
+        elements.push(renderDependentGroup(field, dependents));
       }
     }
     return elements;
@@ -2716,10 +2954,20 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     let batch = [];
     const flushBatch = () => {
       if (batch.length === 0) return;
-      const chunks = maxColumns ? Array.from({ length: Math.ceil(batch.length / maxColumns) }, (_, i) => batch.slice(i * maxColumns, i * maxColumns + maxColumns)) : [batch];
-      for (const chunk of chunks) {
+      if (maxColumns) {
+        const chunks = Array.from(
+          { length: Math.ceil(batch.length / maxColumns) },
+          (_, i) => batch.slice(i * maxColumns, i * maxColumns + maxColumns)
+        );
+        for (const chunk of chunks) {
+          const remainder = maxColumns - chunk.length;
+          elements.push(
+            /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { key: `ag-${chunk[0].name}`, direction: "row", gap }, chunk.map((f) => /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { key: f.name, flex: 1 }, renderField(f))), remainder > 0 && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Box, { flex: remainder }))
+          );
+        }
+      } else {
         elements.push(
-          /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.AutoGrid, { key: `ag-${chunk[0].name}`, columnWidth, flexible: true, gap }, chunk.map((f) => /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, { key: f.name }, renderField(f))))
+          /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.AutoGrid, { key: `ag-${batch[0].name}`, columnWidth, flexible: true, gap }, batch.map((f) => /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, { key: f.name }, renderField(f))))
         );
       }
       batch = [];
@@ -2778,7 +3026,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     if (layout && fieldSubset === visibleFields) return renderExplicitLayout();
     if (columnWidth) return renderAutoGridLayout(fieldSubset);
     if (columns > 1) return renderGridLayout(fieldSubset);
-    return renderLegacyLayout(fieldSubset);
+    return renderSingleColumnLayout(fieldSubset);
   };
   const renderSections = () => {
     const hasSections = Array.isArray(sections) && sections.length > 0;
@@ -2791,7 +3039,8 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
     for (const sec of sections) {
       const sectionFields = sec.fields ? visibleFields.filter((f) => sec.fields.includes(f.name)) : [];
       if (sectionFields.length === 0) continue;
-      const accordionContent = /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap }, renderFieldSubset(sectionFields));
+      const sectionContext = { values: formValues, errors: formErrors };
+      const accordionContent = /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Flex, { direction: "column", gap }, sec.renderBefore && sec.renderBefore(sectionContext), renderFieldSubset(sectionFields), sec.renderAfter && sec.renderAfter(sectionContext));
       const accordion = /* @__PURE__ */ import_react2.default.createElement(
         import_ui_extensions2.Accordion,
         {
@@ -2884,7 +3133,7 @@ var FormBuilder = (0, import_react2.forwardRef)(function FormBuilder2(props, ref
       currentStep,
       stepNames: steps.map((s) => s.title)
     }
-  ), formReadOnly && readOnlyMessage && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage), !addAlert && formError && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), !addAlert && formSuccess && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: successTitle, variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
+  ), showReadOnlyAlert && formReadOnly && readOnlyMessage && (renderReadOnlyAlert ? renderReadOnlyAlert({ title: readOnlyTitle, message: readOnlyMessage }) : /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: readOnlyTitle, variant: "warning" }, readOnlyMessage)), showInlineAlerts && !addAlert && formError && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: errorTitle, variant: "danger" }, typeof formError === "string" ? formError : void 0), showInlineAlerts && !addAlert && formSuccess && /* @__PURE__ */ import_react2.default.createElement(import_ui_extensions2.Alert, { title: successTitle, variant: "success" }, formSuccess), isMultiStep && steps[currentStep] && steps[currentStep].render ? steps[currentStep].render({
     values: formValues,
     goNext: handleNext,
     goBack: handleBack,