@petrarca/sonnet-forms 0.6.0 → 0.8.0

package/dist/index.js

@@ -1477,22 +1477,53 @@ 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,
   disabled = false,
   hasChanges,
   isValid,
+  saveWhenInvalid = "reveal",
   saveLabel = "Save",
   cancelLabel = "Cancel",
   showCancel = true,
+  isValidating = false,
   leadingActions
 }) {
+  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: disabled || !hasChanges || !isValid, 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
+        }
+      )
     ] })
   ] });
 }
@@ -1533,7 +1564,7 @@ function ExtraPropertiesCard({ properties, schema }) {
 var ExtraPropertiesCard_default = ExtraPropertiesCard;
 
 // src/JsonSchemaFormRenderer.tsx
-import React13, { useCallback as useCallback8, 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 {
@@ -2194,9 +2225,11 @@ function resolveLayout(uiSchema, propertySchema) {
   return uiSchema?.["x-ui-layout"] ?? propertySchema["x-ui-layout"];
 }
 function ObjectWidget({
+  id,
   propertySchema,
   value,
   onChange,
+  onBlur,
   registry,
   uiSchema,
   disabled,
@@ -2233,7 +2266,9 @@ function ObjectWidget({
       readOnly: readonly,
       widgets: registry,
       uiSchema: effectiveUiSchema,
-      displayContents
+      displayContents,
+      idPrefix: id,
+      onBlur: onBlur ? () => onBlur(id, value) : void 0
     }
   );
   if (displayContents) return /* @__PURE__ */ jsx21(Fragment3, { children: content });
@@ -2991,7 +3026,8 @@ function OneOfWidget({
             disabled,
             readOnly: readonly,
             widgets: registry,
-            uiSchema: subUiSchema
+            uiSchema: subUiSchema,
+            idPrefix: id
           }
         )
       }
@@ -3414,7 +3450,8 @@ function FormFieldRenderer({
   registry,
   globalOptions = {},
   formData,
-  idPrefix = "field"
+  idPrefix = "field",
+  rawErrors
 }) {
   const label = getFieldTitle(fieldName, property);
   const { description, placeholder } = resolvePresentationText(
@@ -3455,25 +3492,219 @@ function FormFieldRenderer({
       disabled: flags.disabled,
       readonly: flags.readOnly,
       options: mergedOptions,
-      formData
+      formData,
+      rawErrors
     }
   );
   return applyFieldWidth(widget, uiSchema, mergedOptions);
 }
 
 // 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,
-  diffFormData
+  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);
@@ -3517,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,
@@ -3531,44 +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 [originalData, setOriginalData] = useState9(
-    () => applySchemaDefaults2(data, refResolvedSchema)
+  const seed = useState10(
+    () => ensureFormItemIds(
+      applySchemaDefaults2(data, refResolvedSchema),
+      refResolvedSchema
+    )
+  )[0];
+  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(
-    () => applySchemaDefaults2(data, refResolvedSchema)
-  );
-  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 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
@@ -3579,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)
@@ -3593,11 +3839,14 @@ 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 = applySchemaDefaults2(data, refResolvedSchema);
+    const newData = ensureFormItemIds(
+      applySchemaDefaults2(data, refResolvedSchema),
+      refResolvedSchema
+    );
     setFormData(newData);
     const schemaPropertyNames = Object.keys(properties);
     const result = computeBaselineUpdate(
@@ -3621,29 +3870,53 @@ 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(
     (fieldName, value) => {
       if (readOnly) return;
+      setEdited(
+        (prev) => prev[fieldName] ? prev : { ...prev, [fieldName]: true }
+      );
       const immediate = isImmediateField(fieldName, properties);
       if (deferStateUpdates && !immediate) {
         setPendingChanges((prev) => ({ ...prev, [fieldName]: value }));
@@ -3684,6 +3957,11 @@ function useFormEngine({
   const handleFieldBlur = useCallback7(
     (fieldName) => {
       if (readOnly) return;
+      if (edited[fieldName]) {
+        setTouched(
+          (prev) => prev[fieldName] ? prev : { ...prev, [fieldName]: true }
+        );
+      }
       flushPendingField(fieldName);
       const latest = formDataRef.current;
       if (!showActions && deferChanges && onChange) {
@@ -3697,6 +3975,7 @@ function useFormEngine({
     },
     [
       readOnly,
+      edited,
       pendingChanges,
       deferChanges,
       deferStateUpdates,
@@ -3707,11 +3986,25 @@ 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])) {
@@ -3731,11 +4024,20 @@ function useFormEngine({
     pendingChanges,
     deferStateUpdates,
     nonSchemaData,
-    onUpdate
+    onUpdate,
+    extraErrors,
+    asyncErrors,
+    isValidating,
+    uiSchema,
+    validators,
+    isRoot
   ]);
   const handleCancel = useCallback7(() => {
     setFormData({ ...originalData });
     setPendingChanges({});
+    setEdited({});
+    setTouched({});
+    setSubmitAttempted(false);
     onCancel?.();
   }, [originalData, onCancel]);
   return {
@@ -3745,7 +4047,10 @@ function useFormEngine({
     orderedProperties,
     hasChanges,
     isValid,
+    isValidating,
     fieldErrors,
+    touched,
+    submitAttempted,
     handleFieldChange,
     handleFieldBlur,
     handleSave,
@@ -3754,6 +4059,10 @@ function useFormEngine({
 }
 
 // src/JsonSchemaFormRenderer.tsx
+import {
+  useValidationDisplay,
+  useSaveWhenInvalid
+} from "@petrarca/sonnet-core/config";
 import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function stripFids(data) {
   const result = {};
@@ -3901,10 +4210,42 @@ function layoutFieldsInRows(fields, rowDefs, defaultRowGap) {
   );
   return elements.concat(collectUnplacedFields(fields, placed));
 }
+function rootFormData(nestedContext, ownData) {
+  return nestedContext?.rootData ?? ownData;
+}
+function rootSubmitAttempted(nestedContext, ownSubmitAttempted) {
+  return ownSubmitAttempted || (nestedContext?.submitAttempted ?? false);
+}
+function blurHandlerNeeded({
+  deferStateUpdates,
+  deferChanges,
+  hasOnBlur,
+  validationDisplay
+}) {
+  return deferStateUpdates || deferChanges || hasOnBlur || validationDisplay === "onTouched";
+}
+function fieldErrorsVisible(validationDisplay, submitAttempted, isTouched) {
+  if (validationDisplay === "always") return true;
+  if (submitAttempted) return true;
+  return validationDisplay === "onTouched" && !!isTouched;
+}
 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));
@@ -3942,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();
@@ -3973,11 +4331,14 @@ function FormContainer({
   disabled,
   hasChanges,
   isValid,
+  isValidating,
+  saveWhenInvalid,
   saveLabel,
   cancelLabel,
   showCancel,
   leadingActions,
   hiddenErrorCount,
+  formLevelErrors,
   children
 }) {
   if (displayContents) {
@@ -3987,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,
       {
@@ -3995,6 +4357,8 @@ function FormContainer({
         disabled,
         hasChanges,
         isValid,
+        isValidating,
+        saveWhenInvalid,
         saveLabel,
         cancelLabel,
         showCancel,
@@ -4013,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,
@@ -4036,7 +4403,10 @@ function JsonSchemaFormRenderer(props) {
     orderedProperties,
     hasChanges,
     isValid,
+    isValidating,
     fieldErrors,
+    touched,
+    submitAttempted,
     handleFieldChange,
     handleFieldBlur,
     handleSave,
@@ -4055,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]
   );
@@ -4075,21 +4448,47 @@ function JsonSchemaFormRenderer(props) {
       {
         ...props2,
         templates: resolvedTemplates,
+        validators,
         showActions: false,
         showExtraProperties: false
       }
     ),
-    [resolvedTemplates]
+    [resolvedTemplates, validators]
   );
-  const contextValue = useMemo8(
-    () => ({ renderer: nestedRenderer, templates: resolvedTemplates }),
-    [nestedRenderer, resolvedTemplates]
+  const rootData = rootFormData(nestedFormContext, displayData);
+  const effectiveSubmitAttempted = rootSubmitAttempted(
+    nestedFormContext,
+    submitAttempted
   );
-  const needsBlurHandler = deferStateUpdates || !!onBlur;
-  const fields = useMemo8(
+  const contextValue = useMemo9(
+    () => ({
+      renderer: nestedRenderer,
+      templates: resolvedTemplates,
+      rootData,
+      submitAttempted: effectiveSubmitAttempted
+    }),
+    [nestedRenderer, resolvedTemplates, rootData, effectiveSubmitAttempted]
+  );
+  const validationDisplay = useValidationDisplay(props.validationDisplay);
+  const saveWhenInvalid = useSaveWhenInvalid(props.saveWhenInvalid);
+  const needsBlurHandler = blurHandlerNeeded({
+    deferStateUpdates,
+    deferChanges,
+    hasOnBlur: !!onBlur,
+    validationDisplay
+  });
+  const showFieldErrors = useCallback8(
+    (fieldName) => fieldErrorsVisible(
+      validationDisplay,
+      effectiveSubmitAttempted,
+      touched[fieldName]
+    ),
+    [validationDisplay, effectiveSubmitAttempted, touched]
+  );
+  const fields = useMemo9(
     () => orderedProperties.flatMap(([fieldName, property]) => {
       const rule = uiSchema[fieldName]?.["x-ui-rule"] ?? property["x-ui-rule"];
-      const { visible, enabled } = evaluateUiRule(rule, displayData);
+      const { visible, enabled } = evaluateUiRule(rule, rootData);
       if (!visible) return [];
       return [
         /* @__PURE__ */ jsx37(
@@ -4108,7 +4507,13 @@ function JsonSchemaFormRenderer(props) {
             registry: widgets,
             globalOptions,
             formData: displayData,
-            idPrefix
+            idPrefix,
+            rawErrors: fieldRawErrors(
+              fieldName,
+              fieldErrors,
+              props.extraErrors,
+              showFieldErrors(fieldName)
+            )
           },
           fieldName
         )
@@ -4117,6 +4522,7 @@ function JsonSchemaFormRenderer(props) {
     [
       orderedProperties,
       displayData,
+      rootData,
       resolvedSchema,
       disabled,
       readOnly,
@@ -4126,6 +4532,9 @@ function JsonSchemaFormRenderer(props) {
       globalOptions,
       idPrefix,
       needsBlurHandler,
+      showFieldErrors,
+      fieldErrors,
+      props.extraErrors,
       handleFieldChange,
       handleFieldBlur
     ]
@@ -4138,14 +4547,15 @@ function JsonSchemaFormRenderer(props) {
     resolvedTemplates,
     layoutConfig?.variant
   );
-  const layoutFields = useMemo8(() => {
+  const layoutFields = useMemo9(() => {
     if (groupDefs && groupDefs.length > 0) {
       return layoutFieldsInGroups(
         fields,
         groupDefs,
         defaultRowGap,
         fieldErrors,
-        displayData,
+        // Tab rules are x-ui-rule too: root-anchored like field rules.
+        rootData,
         groupTemplate
       );
     }
@@ -4159,15 +4569,19 @@ function JsonSchemaFormRenderer(props) {
     groupDefs,
     defaultRowGap,
     fieldErrors,
-    displayData,
+    rootData,
     groupTemplate
   ]);
-  const hiddenErrorCount = useMemo8(() => {
+  const hiddenErrorCount = useMemo9(() => {
     if (!groupDefs?.length || fieldErrors.length === 0) return 0;
-    const hidden = hiddenGroupFieldNames(groupDefs, displayData);
+    const hidden = hiddenGroupFieldNames(groupDefs, rootData);
     if (hidden.size === 0) return 0;
     return fieldErrors.filter((e) => hidden.has(pointerRoot(e.pointer))).length;
-  }, [groupDefs, fieldErrors, displayData]);
+  }, [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,
     {
@@ -4181,20 +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({
@@ -4202,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);