@petrarca/sonnet-forms 0.7.0 → 0.8.0

package/dist/index.js

@@ -1477,6 +1477,10 @@ FormQuantityInput.displayName = "FormQuantityInput";
 import { Button as Button3 } from "@petrarca/sonnet-ui";
 import { SimpleGroup } from "@petrarca/sonnet-ui";
 import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function isSaveDisabled(args) {
+  if (args.disabled || !args.hasChanges || args.isValidating) return true;
+  return args.saveWhenInvalid === "disable" && !args.isValid;
+}
 function FormActions({
   onSave,
   onCancel,
@@ -1487,14 +1491,39 @@ function FormActions({
   saveLabel = "Save",
   cancelLabel = "Cancel",
   showCancel = true,
+  isValidating = false,
   leadingActions
 }) {
-  const saveDisabled = disabled || !hasChanges || saveWhenInvalid === "disable" && !isValid;
+  const saveDisabled = isSaveDisabled({
+    disabled,
+    hasChanges,
+    isValid,
+    isValidating,
+    saveWhenInvalid
+  });
+  const keepFocus = (e) => e.preventDefault();
   return /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mt-4", children: [
     /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-2", children: leadingActions }),
     /* @__PURE__ */ jsxs9(SimpleGroup, { justify: "flex-end", children: [
-      showCancel && /* @__PURE__ */ jsx10(Button3, { variant: "outline", onClick: onCancel, disabled, children: cancelLabel }),
-      /* @__PURE__ */ jsx10(Button3, { onClick: onSave, disabled: saveDisabled, children: saveLabel })
+      showCancel && /* @__PURE__ */ jsx10(
+        Button3,
+        {
+          variant: "outline",
+          onClick: onCancel,
+          onMouseDown: keepFocus,
+          disabled,
+          children: cancelLabel
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        Button3,
+        {
+          onClick: onSave,
+          onMouseDown: keepFocus,
+          disabled: saveDisabled,
+          children: saveLabel
+        }
+      )
     ] })
   ] });
 }
@@ -1535,7 +1564,7 @@ function ExtraPropertiesCard({ properties, schema }) {
 var ExtraPropertiesCard_default = ExtraPropertiesCard;
 
 // src/JsonSchemaFormRenderer.tsx
-import React13, { useCallback as useCallback8, useContext as useContext2, useMemo as useMemo8 } from "react";
+import React13, { useCallback as useCallback8, useContext as useContext2, useMemo as useMemo9 } from "react";
 import { SimpleStack } from "@petrarca/sonnet-ui";
 import { AlertCircle as AlertCircle2 } from "lucide-react";
 import {
@@ -3471,19 +3500,211 @@ function FormFieldRenderer({
 }
 
 // src/hooks/useFormEngine.ts
-import { useState as useState9, useEffect as useEffect3, useMemo as useMemo7, useCallback as useCallback7, useRef as useRef5 } from "react";
+import { useState as useState10, useEffect as useEffect4, useMemo as useMemo8, useCallback as useCallback7, useRef as useRef6 } from "react";
 import { isEqual } from "@petrarca/sonnet-core";
 import {
-  getSchemaProperties,
+  getSchemaProperties as getSchemaProperties4,
   getFieldDefault,
   applySchemaDefaults as applySchemaDefaults2,
   resolveSchema,
   resolveRefs,
   validateFormData,
+  mergeFieldErrors,
   diffFormData,
   ensureFormItemIds
 } from "@petrarca/sonnet-core/schema";
 
+// src/validators/runValidators.ts
+import { getSchemaProperties as getSchemaProperties2 } from "@petrarca/sonnet-core/schema";
+
+// src/validators/shared.ts
+import { getSchemaProperties } from "@petrarca/sonnet-core/schema";
+function toRefs(v) {
+  if (v === void 0) return [];
+  const arr = Array.isArray(v) ? v : [v];
+  return arr.map((item) => typeof item === "string" ? { name: item } : item);
+}
+function escapeToken(token) {
+  return token.replace(/~/g, "~0").replace(/\//g, "~1");
+}
+function fieldPointer(fieldName) {
+  return `/${escapeToken(fieldName)}`;
+}
+function resolveFieldRefs(fieldName, schema, uiSchema) {
+  const property = getSchemaProperties(schema)[fieldName] ?? {};
+  return toRefs(
+    uiSchema[fieldName]?.["x-ui-validate"] ?? property["x-ui-validate"]
+  );
+}
+function toFieldErrors(result, pointer) {
+  if (result == null || result === "") return [];
+  if (typeof result === "string") return [{ pointer, message: result }];
+  if (Array.isArray(result)) return result;
+  return [];
+}
+
+// src/validators/runValidators.ts
+function isKnownName(registry, name) {
+  return !!(registry.field?.[name] || registry.asyncField?.[name] || registry.form?.[name] || registry.asyncForm?.[name]);
+}
+function unknownValidator(kind, name, registry) {
+  const registered = [
+    ...Object.keys(registry.field ?? {}),
+    ...Object.keys(registry.asyncField ?? {}),
+    ...Object.keys(registry.form ?? {}),
+    ...Object.keys(registry.asyncForm ?? {})
+  ];
+  throw new Error(
+    `unknown ${kind} validator '${name}' (registered: [${registered.join(", ")}])`
+  );
+}
+function runFieldRefs(fieldName, data, registry, uiSchema, schema, out) {
+  const refs = resolveFieldRefs(fieldName, schema, uiSchema);
+  if (refs.length === 0) return;
+  const pointer = fieldPointer(fieldName);
+  const value = data[fieldName];
+  for (const ref of refs) {
+    if (!isKnownName(registry, ref.name)) {
+      unknownValidator("field", ref.name, registry);
+    }
+    const fn = registry.field?.[ref.name];
+    if (!fn) continue;
+    const ctx = {
+      formData: data,
+      path: pointer,
+      args: ref.args
+    };
+    out.push(...toFieldErrors(fn(value, ctx), pointer));
+  }
+}
+function runFormRefs(data, registry, schema, out) {
+  for (const ref of toRefs(schema["x-ui-validate"])) {
+    if (!isKnownName(registry, ref.name)) {
+      unknownValidator("form", ref.name, registry);
+    }
+    const fn = registry.form?.[ref.name];
+    if (!fn) continue;
+    const ctx = { formData: data, path: "", args: ref.args };
+    out.push(...fn(data, ctx));
+  }
+}
+function runValidators(schema, data, registry, uiSchema, includeFormValidators) {
+  const out = [];
+  if (!registry) return out;
+  for (const fieldName of Object.keys(getSchemaProperties2(schema))) {
+    runFieldRefs(fieldName, data, registry, uiSchema, schema, out);
+  }
+  if (includeFormValidators) {
+    runFormRefs(data, registry, schema, out);
+  }
+  return out;
+}
+
+// src/validators/useAsyncValidators.ts
+import { useEffect as useEffect3, useMemo as useMemo7, useRef as useRef5, useState as useState9 } from "react";
+import { getSchemaProperties as getSchemaProperties3 } from "@petrarca/sonnet-core/schema";
+function keyOf(value) {
+  try {
+    return JSON.stringify(value) ?? "undefined";
+  } catch {
+    return String(value);
+  }
+}
+function collectFieldCandidates(schema, data, registry, uiSchema, out) {
+  for (const fieldName of Object.keys(getSchemaProperties3(schema))) {
+    const refs = resolveFieldRefs(fieldName, schema, uiSchema);
+    const pointer = fieldPointer(fieldName);
+    const value = data[fieldName];
+    for (const ref of refs) {
+      const fn = registry[ref.name];
+      if (!fn) continue;
+      const ctx = {
+        formData: data,
+        path: pointer,
+        args: ref.args
+      };
+      out.push({
+        id: `asyncField:${pointer}:${ref.name}`,
+        key: keyOf(value),
+        pointer,
+        run: () => fn(value, ctx)
+      });
+    }
+  }
+}
+function collectFormCandidates(schema, data, registry, out) {
+  for (const ref of toRefs(schema["x-ui-validate"])) {
+    const fn = registry[ref.name];
+    if (!fn) continue;
+    const ctx = { formData: data, path: "", args: ref.args };
+    const basis = ref.dependsOn ? ref.dependsOn.map((f) => keyOf(data[f])).join("|") : keyOf(data);
+    out.push({
+      id: `asyncForm:${ref.name}`,
+      key: basis,
+      pointer: "",
+      run: () => fn(data, ctx)
+    });
+  }
+}
+function collectCandidates(schema, data, registry, uiSchema, isRoot) {
+  const out = [];
+  if (registry.asyncField) {
+    collectFieldCandidates(schema, data, registry.asyncField, uiSchema, out);
+  }
+  if (registry.asyncForm && isRoot) {
+    collectFormCandidates(schema, data, registry.asyncForm, out);
+  }
+  return out;
+}
+function useAsyncValidators(schema, data, registry, uiSchema, isRoot) {
+  const [entries, setEntries] = useState9({});
+  const handledKey = useRef5({});
+  const candidates = registry && (registry.asyncField || registry.asyncForm) ? collectCandidates(schema, data, registry, uiSchema, isRoot) : [];
+  const liveIds = new Set(candidates.map((c) => c.id));
+  const signature = candidates.map((c) => `${c.id}=${c.key}`).join(";");
+  useEffect3(() => {
+    for (const c of candidates) {
+      if (handledKey.current[c.id] === c.key) continue;
+      handledKey.current[c.id] = c.key;
+      setEntries((e) => ({
+        ...e,
+        [c.id]: { key: c.key, pending: true, errors: [] }
+      }));
+      const settle = (errors) => {
+        if (handledKey.current[c.id] !== c.key) return;
+        setEntries((e) => ({
+          ...e,
+          [c.id]: { key: c.key, pending: false, errors }
+        }));
+      };
+      c.run().then((r) => settle(toFieldErrors(r, c.pointer))).catch(() => settle([]));
+    }
+  }, [signature]);
+  const liveKey = [...liveIds].sort().join(",");
+  useEffect3(() => {
+    setEntries((e) => {
+      const kept = Object.entries(e).filter(([id]) => liveIds.has(id));
+      return kept.length === Object.keys(e).length ? e : Object.fromEntries(kept);
+    });
+    for (const id of Object.keys(handledKey.current)) {
+      if (!liveIds.has(id)) delete handledKey.current[id];
+    }
+  }, [liveKey]);
+  let isValidating = false;
+  const errorList = [];
+  for (const c of candidates) {
+    const entry = entries[c.id];
+    if (!entry || entry.key !== c.key || entry.pending) {
+      isValidating = true;
+      continue;
+    }
+    errorList.push(...entry.errors);
+  }
+  const errorSig = errorList.map((e) => `${e.pointer}\0${e.message}`).join("|");
+  const asyncErrors = useMemo7(() => errorList, [errorSig]);
+  return { asyncErrors, isValidating };
+}
+
 // src/hooks/orderProperties.ts
 function orderProperties(properties, orderArray) {
   const allEntries = Object.entries(properties);
@@ -3527,6 +3748,11 @@ function computeBaselineUpdate(newData, originalData, initialized, schemaPropert
   }
   return null;
 }
+function computeAllErrors(args) {
+  const { schema, data, customSync, asyncErrors, extraErrors } = args;
+  const base = validateFormData(schema, data).fieldErrors;
+  return mergeFieldErrors(base, customSync, asyncErrors, extraErrors ?? []);
+}
 function useFormEngine({
   schema,
   data,
@@ -3541,51 +3767,54 @@ function useFormEngine({
   deferChanges = false,
   deferStateUpdates = false,
   allowPristineSave = false,
-  refResolver
+  refResolver,
+  extraErrors,
+  validators,
+  isRoot = true
 }) {
-  const refResolvedSchema = useMemo7(
+  const refResolvedSchema = useMemo8(
     () => resolveRefs(schema, refResolver),
     [schema, refResolver]
   );
-  const seed = useState9(
+  const seed = useState10(
     () => ensureFormItemIds(
       applySchemaDefaults2(data, refResolvedSchema),
       refResolvedSchema
     )
   )[0];
-  const [originalData, setOriginalData] = useState9(
+  const [originalData, setOriginalData] = useState10(
     () => seed
   );
-  const [originalDataInitialized, setOriginalDataInitialized] = useState9(false);
-  const [nonSchemaData, setNonSchemaData] = useState9(
+  const [originalDataInitialized, setOriginalDataInitialized] = useState10(false);
+  const [nonSchemaData, setNonSchemaData] = useState10(
     () => {
-      const props = getSchemaProperties(refResolvedSchema);
+      const props = getSchemaProperties4(refResolvedSchema);
       const names = Object.keys(props);
       return Object.fromEntries(
         Object.entries(data).filter(([k]) => !names.includes(k))
       );
     }
   );
-  const [formData, setFormData] = useState9(() => seed);
-  const formDataRef = useRef5(formData);
+  const [formData, setFormData] = useState10(() => seed);
+  const formDataRef = useRef6(formData);
   formDataRef.current = formData;
-  const [pendingChanges, setPendingChanges] = useState9({});
-  const resolvedSchema = useMemo7(
+  const [pendingChanges, setPendingChanges] = useState10({});
+  const resolvedSchema = useMemo8(
     () => resolveSchema(refResolvedSchema, formData),
     [refResolvedSchema, formData]
   );
-  const orderedProperties = useMemo7(() => {
-    const properties2 = getSchemaProperties(resolvedSchema);
+  const orderedProperties = useMemo8(() => {
+    const properties2 = getSchemaProperties4(resolvedSchema);
     const rawOrder = uiSchema["x-ui-order"] ?? resolvedSchema["x-ui-order"];
     const orderArray = Array.isArray(rawOrder) ? rawOrder : void 0;
     return orderProperties(properties2, orderArray);
   }, [resolvedSchema, uiSchema]);
-  const [initialDefaultsSent, setInitialDefaultsSent] = useState9(false);
-  const [edited, setEdited] = useState9({});
-  const [touched, setTouched] = useState9({});
-  const [submitAttempted, setSubmitAttempted] = useState9(false);
-  const properties = getSchemaProperties(resolvedSchema);
-  useEffect3(() => {
+  const [initialDefaultsSent, setInitialDefaultsSent] = useState10(false);
+  const [edited, setEdited] = useState10({});
+  const [touched, setTouched] = useState10({});
+  const [submitAttempted, setSubmitAttempted] = useState10(false);
+  const properties = getSchemaProperties4(resolvedSchema);
+  useEffect4(() => {
     if (!initialDefaultsSent) {
       const hasDefaults = Object.entries(properties).some(
         ([fieldName, property]) => data[fieldName] === void 0 && getFieldDefault(property) !== void 0
@@ -3596,7 +3825,7 @@ function useFormEngine({
       setInitialDefaultsSent(true);
     }
   }, [initialDefaultsSent, properties, data, formData, onChange]);
-  useEffect3(() => {
+  useEffect4(() => {
     const currentPropertyNames = Object.keys(properties);
     const keysToRemove = Object.keys(formData).filter(
       (k) => !currentPropertyNames.includes(k)
@@ -3610,8 +3839,8 @@ function useFormEngine({
       if (onChange) onChange(cleanedData);
     }
   }, [properties, formData, onChange]);
-  const prevDataRef = useRef5(data);
-  useEffect3(() => {
+  const prevDataRef = useRef6(data);
+  useEffect4(() => {
     if (isEqual(prevDataRef.current, data)) return;
     prevDataRef.current = data;
     const newData = ensureFormItemIds(
@@ -3641,24 +3870,45 @@ function useFormEngine({
     originalData,
     originalDataInitialized
   ]);
-  const hasChanges = useMemo7(
+  const hasChanges = useMemo8(
     () => !isEqual(formData, originalData),
     [formData, originalData]
   );
-  const displayData = useMemo7(() => {
+  const displayData = useMemo8(() => {
     if (deferStateUpdates && Object.keys(pendingChanges).length > 0) {
       return { ...formData, ...pendingChanges };
     }
     return formData;
   }, [formData, pendingChanges, deferStateUpdates]);
-  const validation = useMemo7(
-    () => validateFormData(resolvedSchema, displayData),
-    [resolvedSchema, displayData]
+  const customSync = useMemo8(
+    () => runValidators(resolvedSchema, displayData, validators, uiSchema, isRoot),
+    [resolvedSchema, displayData, validators, uiSchema, isRoot]
+  );
+  const { asyncErrors, isValidating } = useAsyncValidators(
+    resolvedSchema,
+    displayData,
+    validators,
+    uiSchema,
+    isRoot
   );
+  const validation = useMemo8(() => {
+    const merged = computeAllErrors({
+      schema: resolvedSchema,
+      data: displayData,
+      customSync,
+      asyncErrors,
+      extraErrors
+    });
+    return {
+      fieldErrors: merged,
+      errors: merged.map((e) => e.message),
+      isValid: merged.length === 0
+    };
+  }, [resolvedSchema, displayData, customSync, asyncErrors, extraErrors]);
   const { isValid, fieldErrors } = validation;
-  const onValidationChangeRef = useRef5(onValidationChange);
+  const onValidationChangeRef = useRef6(onValidationChange);
   onValidationChangeRef.current = onValidationChange;
-  useEffect3(() => {
+  useEffect4(() => {
     onValidationChangeRef.current?.(validation.errors, validation.isValid);
   }, [validation]);
   const handleFieldChange = useCallback7(
@@ -3738,10 +3988,23 @@ function useFormEngine({
   const handleSave = useCallback7(() => {
     setSubmitAttempted(true);
     if (!hasChanges && !allowPristineSave) return;
+    if (isValidating) return;
     const finalData = deferStateUpdates && Object.keys(pendingChanges).length > 0 ? { ...formData, ...pendingChanges } : formData;
     const completeData = { ...nonSchemaData, ...finalData };
-    const validation2 = validateFormData(resolvedSchema, finalData);
-    if (validation2.isValid && onUpdate) {
+    const saveErrors = computeAllErrors({
+      schema: resolvedSchema,
+      data: finalData,
+      customSync: runValidators(
+        resolvedSchema,
+        finalData,
+        validators,
+        uiSchema,
+        isRoot
+      ),
+      asyncErrors,
+      extraErrors
+    });
+    if (saveErrors.length === 0 && onUpdate) {
       const changed = {};
       for (const key of Object.keys(finalData)) {
         if (!isEqual(finalData[key], originalData[key])) {
@@ -3761,7 +4024,13 @@ function useFormEngine({
     pendingChanges,
     deferStateUpdates,
     nonSchemaData,
-    onUpdate
+    onUpdate,
+    extraErrors,
+    asyncErrors,
+    isValidating,
+    uiSchema,
+    validators,
+    isRoot
   ]);
   const handleCancel = useCallback7(() => {
     setFormData({ ...originalData });
@@ -3778,6 +4047,7 @@ function useFormEngine({
     orderedProperties,
     hasChanges,
     isValid,
+    isValidating,
     fieldErrors,
     touched,
     submitAttempted,
@@ -3940,8 +4210,11 @@ function layoutFieldsInRows(fields, rowDefs, defaultRowGap) {
   );
   return elements.concat(collectUnplacedFields(fields, placed));
 }
-function useRootFormData(ownData) {
-  return useContext2(NestedFormContext)?.rootData ?? ownData;
+function rootFormData(nestedContext, ownData) {
+  return nestedContext?.rootData ?? ownData;
+}
+function rootSubmitAttempted(nestedContext, ownSubmitAttempted) {
+  return ownSubmitAttempted || (nestedContext?.submitAttempted ?? false);
 }
 function blurHandlerNeeded({
   deferStateUpdates,
@@ -3960,6 +4233,19 @@ function pointerRoot(pointer) {
   const token = pointer.split("/")[1] ?? "";
   return token.replace(/~1/g, "/").replace(/~0/g, "~");
 }
+function fieldRawErrors(fieldName, fieldErrors, extraErrors, gated) {
+  const forField = fieldErrors.filter(
+    (e) => pointerRoot(e.pointer) === fieldName
+  );
+  if (forField.length === 0) return void 0;
+  const extraMessages = new Set(
+    (extraErrors ?? []).filter((e) => pointerRoot(e.pointer) === fieldName).map((e) => e.message)
+  );
+  const always = forField.filter((e) => extraMessages.has(e.message)).map((e) => e.message);
+  const rest = gated ? forField.filter((e) => !extraMessages.has(e.message)).map((e) => e.message) : [];
+  const all = [...always, ...rest];
+  return all.length > 0 ? all : void 0;
+}
 function groupErrorCount(tab, fieldErrors) {
   if (fieldErrors.length === 0) return 0;
   const owned = new Set(tab.rows.flatMap((row) => row.fields));
@@ -3997,6 +4283,23 @@ function HiddenErrorNotice({
     count === 1 ? "1 required field is in a section that is not currently shown." : `${count} required fields are in sections that are not currently shown.`
   ] });
 }
+function FormLevelErrors({
+  messages
+}) {
+  if (messages.length === 0) return null;
+  return /* @__PURE__ */ jsx37("div", { className: "space-y-1", children: messages.map((msg, i) => /* @__PURE__ */ jsxs23(
+    "p",
+    {
+      role: "alert",
+      className: "flex items-center gap-1.5 text-sm text-destructive",
+      children: [
+        /* @__PURE__ */ jsx37(AlertCircle2, { className: "h-4 w-4 shrink-0" }),
+        msg
+      ]
+    },
+    i
+  )) });
+}
 function layoutFieldsInGroups(fields, groupDefs, defaultRowGap, fieldErrors, formData, GroupTemplate) {
   const fieldMap = buildFieldMap(fields);
   const placed = /* @__PURE__ */ new Set();
@@ -4028,12 +4331,14 @@ function FormContainer({
   disabled,
   hasChanges,
   isValid,
+  isValidating,
   saveWhenInvalid,
   saveLabel,
   cancelLabel,
   showCancel,
   leadingActions,
   hiddenErrorCount,
+  formLevelErrors,
   children
 }) {
   if (displayContents) {
@@ -4043,6 +4348,7 @@ function FormContainer({
     children,
     showExtraProperties && /* @__PURE__ */ jsx37(ExtraPropertiesCard_default, { properties: formData, schema: resolvedSchema }),
     /* @__PURE__ */ jsx37(HiddenErrorNotice, { count: hiddenErrorCount }),
+    /* @__PURE__ */ jsx37(FormLevelErrors, { messages: formLevelErrors }),
     showActions && /* @__PURE__ */ jsx37(
       FormActions,
       {
@@ -4051,6 +4357,7 @@ function FormContainer({
         disabled,
         hasChanges,
         isValid,
+        isValidating,
         saveWhenInvalid,
         saveLabel,
         cancelLabel,
@@ -4070,9 +4377,12 @@ function JsonSchemaFormRenderer(props) {
     onUpdate,
     onCancel,
     templates,
+    validators,
     leadingActions,
     idPrefix = "field"
   } = props;
+  const nestedFormContext = useContext2(NestedFormContext);
+  const isRootForm = nestedFormContext === null;
   const {
     disabled,
     readOnly,
@@ -4093,6 +4403,7 @@ function JsonSchemaFormRenderer(props) {
     orderedProperties,
     hasChanges,
     isValid,
+    isValidating,
     fieldErrors,
     touched,
     submitAttempted,
@@ -4114,17 +4425,20 @@ function JsonSchemaFormRenderer(props) {
     deferChanges,
     deferStateUpdates,
     allowPristineSave,
-    refResolver: props.refResolver
+    refResolver: props.refResolver,
+    extraErrors: props.extraErrors,
+    validators,
+    isRoot: isRootForm
   });
   const layoutLabelPlacement = uiSchema["x-ui-layout"]?.labelPlacement;
-  const globalOptions = useMemo8(
+  const globalOptions = useMemo9(
     () => ({
       ...layoutLabelPlacement ? { labelPlacement: layoutLabelPlacement } : {},
       ...uiSchema["x-ui-globalOptions"] || {}
     }),
     [layoutLabelPlacement, uiSchema]
   );
-  const resolvedTemplates = useMemo8(
+  const resolvedTemplates = useMemo9(
     () => ({ ...DEFAULT_TEMPLATES, ...templates }),
     [templates]
   );
@@ -4134,20 +4448,26 @@ function JsonSchemaFormRenderer(props) {
       {
         ...props2,
         templates: resolvedTemplates,
+        validators,
         showActions: false,
         showExtraProperties: false
       }
     ),
-    [resolvedTemplates]
+    [resolvedTemplates, validators]
+  );
+  const rootData = rootFormData(nestedFormContext, displayData);
+  const effectiveSubmitAttempted = rootSubmitAttempted(
+    nestedFormContext,
+    submitAttempted
   );
-  const rootData = useRootFormData(displayData);
-  const contextValue = useMemo8(
+  const contextValue = useMemo9(
     () => ({
       renderer: nestedRenderer,
       templates: resolvedTemplates,
-      rootData
+      rootData,
+      submitAttempted: effectiveSubmitAttempted
     }),
-    [nestedRenderer, resolvedTemplates, rootData]
+    [nestedRenderer, resolvedTemplates, rootData, effectiveSubmitAttempted]
   );
   const validationDisplay = useValidationDisplay(props.validationDisplay);
   const saveWhenInvalid = useSaveWhenInvalid(props.saveWhenInvalid);
@@ -4160,12 +4480,12 @@ function JsonSchemaFormRenderer(props) {
   const showFieldErrors = useCallback8(
     (fieldName) => fieldErrorsVisible(
       validationDisplay,
-      submitAttempted,
+      effectiveSubmitAttempted,
       touched[fieldName]
     ),
-    [validationDisplay, submitAttempted, touched]
+    [validationDisplay, effectiveSubmitAttempted, touched]
   );
-  const fields = useMemo8(
+  const fields = useMemo9(
     () => orderedProperties.flatMap(([fieldName, property]) => {
       const rule = uiSchema[fieldName]?.["x-ui-rule"] ?? property["x-ui-rule"];
       const { visible, enabled } = evaluateUiRule(rule, rootData);
@@ -4188,7 +4508,12 @@ function JsonSchemaFormRenderer(props) {
             globalOptions,
             formData: displayData,
             idPrefix,
-            rawErrors: showFieldErrors(fieldName) ? fieldErrors.filter((e) => pointerRoot(e.pointer) === fieldName).map((e) => e.message) : void 0
+            rawErrors: fieldRawErrors(
+              fieldName,
+              fieldErrors,
+              props.extraErrors,
+              showFieldErrors(fieldName)
+            )
           },
           fieldName
         )
@@ -4209,6 +4534,7 @@ function JsonSchemaFormRenderer(props) {
       needsBlurHandler,
       showFieldErrors,
       fieldErrors,
+      props.extraErrors,
       handleFieldChange,
       handleFieldBlur
     ]
@@ -4221,7 +4547,7 @@ function JsonSchemaFormRenderer(props) {
     resolvedTemplates,
     layoutConfig?.variant
   );
-  const layoutFields = useMemo8(() => {
+  const layoutFields = useMemo9(() => {
     if (groupDefs && groupDefs.length > 0) {
       return layoutFieldsInGroups(
         fields,
@@ -4246,12 +4572,16 @@ function JsonSchemaFormRenderer(props) {
     rootData,
     groupTemplate
   ]);
-  const hiddenErrorCount = useMemo8(() => {
+  const hiddenErrorCount = useMemo9(() => {
     if (!groupDefs?.length || fieldErrors.length === 0) return 0;
     const hidden = hiddenGroupFieldNames(groupDefs, rootData);
     if (hidden.size === 0) return 0;
     return fieldErrors.filter((e) => hidden.has(pointerRoot(e.pointer))).length;
   }, [groupDefs, fieldErrors, rootData]);
+  const formLevelErrors = useMemo9(() => {
+    if (validationDisplay !== "always" && !submitAttempted) return [];
+    return fieldErrors.filter((e) => e.pointer === "").map((e) => e.message);
+  }, [fieldErrors, validationDisplay, submitAttempted]);
   return /* @__PURE__ */ jsx37(NestedFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx37(
     FormContainer,
     {
@@ -4265,21 +4595,23 @@ function JsonSchemaFormRenderer(props) {
       disabled,
       hasChanges: hasChanges || allowPristineSave,
       isValid,
+      isValidating,
       saveWhenInvalid,
       saveLabel,
       cancelLabel,
       showCancel,
       leadingActions,
       hiddenErrorCount,
+      formLevelErrors,
       children: layoutFields
     }
   ) });
 }
 
 // src/hooks/useResolvedSchema.ts
-import { useMemo as useMemo9 } from "react";
+import { useMemo as useMemo10 } from "react";
 import {
-  getSchemaProperties as getSchemaProperties2,
+  getSchemaProperties as getSchemaProperties5,
   resolveSchema as resolveSchema2
 } from "@petrarca/sonnet-core/schema";
 function useResolvedSchema({
@@ -4287,12 +4619,12 @@ function useResolvedSchema({
   formData,
   uiSchema
 }) {
-  const resolvedSchema = useMemo9(
+  const resolvedSchema = useMemo10(
     () => resolveSchema2(schema, formData),
     [schema, formData]
   );
-  const orderedProperties = useMemo9(() => {
-    const properties = getSchemaProperties2(resolvedSchema);
+  const orderedProperties = useMemo10(() => {
+    const properties = getSchemaProperties5(resolvedSchema);
     const rawOrder = uiSchema["x-ui-order"] ?? resolvedSchema["x-ui-order"];
     const orderArray = Array.isArray(rawOrder) ? rawOrder : void 0;
     return orderProperties(properties, orderArray);