@petrarca/sonnet-forms 0.5.0 → 0.6.0

package/dist/index.js

@@ -1533,12 +1533,13 @@ function ExtraPropertiesCard({ properties, schema }) {
 var ExtraPropertiesCard_default = ExtraPropertiesCard;
 
 // src/JsonSchemaFormRenderer.tsx
-import React11, { useCallback as useCallback8, useMemo as useMemo7 } from "react";
+import React13, { useCallback as useCallback8, useMemo as useMemo8 } from "react";
 import { SimpleStack } from "@petrarca/sonnet-ui";
+import { AlertCircle as AlertCircle2 } from "lucide-react";
 import {
   WIDTH_TOKEN_REMS
 } from "@petrarca/sonnet-core/schema";
-import { isFieldRequired } from "@petrarca/sonnet-core/schema";
+import { isFieldRequired, evaluateUiRule } from "@petrarca/sonnet-core/schema";
 import { FORM_ITEM_ID_FIELD as FORM_ITEM_ID_FIELD2 } from "@petrarca/sonnet-core";
 
 // src/widgets/types.ts
@@ -1794,6 +1795,7 @@ function SelectWidget(props) {
   const enumNames = widgetOptions.enumNames || {};
   const clearable = widgetOptions.clearable !== false && !required;
   const isMultiple = widgetOptions.multiple ?? propertySchema.type === "array";
+  const creatable = !!widgetOptions.creatable;
   const selectOptions = buildSelectOptions(propertySchema, enumNames);
   const error = firstError(rawErrors);
   const compact = widgetOptions?.compact;
@@ -1844,7 +1846,9 @@ function SelectWidget(props) {
       autoFocus: autofocus,
       onBlur: handleBlur,
       className: triggerClassName,
-      compact
+      compact,
+      allowCreate: creatable,
+      onCreate: (label2) => onChange(label2)
     }
   );
 }
@@ -2696,9 +2700,309 @@ function QuantityWidget({
   );
 }
 
+// src/widgets/DateWidget.tsx
+import { DateInput } from "@petrarca/sonnet-ui";
+import { jsx as jsx26 } from "react/jsx-runtime";
+function resolvePrecision(value) {
+  return value === "year" || value === "month" ? value : "day";
+}
+function DateWidget({
+  id,
+  value,
+  onChange,
+  onBlur,
+  required,
+  disabled,
+  rawErrors,
+  label,
+  description,
+  placeholder,
+  options
+}) {
+  const error = firstError(rawErrors);
+  const precision = resolvePrecision(options?.precision);
+  const locale = typeof options?.locale === "string" ? options.locale : void 0;
+  return /* @__PURE__ */ jsx26(
+    FormFieldWrapper,
+    {
+      inputId: id,
+      label,
+      description,
+      required,
+      labelPlacement: options?.labelPlacement,
+      children: /* @__PURE__ */ jsx26(
+        DateInput,
+        {
+          id,
+          value: typeof value === "string" ? value : "",
+          onChange,
+          onBlur: () => onBlur?.(id, value),
+          precision,
+          locale,
+          placeholder,
+          required,
+          disabled,
+          error
+        }
+      )
+    }
+  );
+}
+
+// src/widgets/TimeWidget.tsx
+import { TimeInput } from "@petrarca/sonnet-ui";
+import { jsx as jsx27 } from "react/jsx-runtime";
+function resolveGranularity(value) {
+  return value === "second" ? "second" : "minute";
+}
+function TimeWidget({
+  id,
+  value,
+  onChange,
+  onBlur,
+  required,
+  disabled,
+  rawErrors,
+  label,
+  description,
+  placeholder,
+  options
+}) {
+  const error = firstError(rawErrors);
+  const granularity = resolveGranularity(options?.granularity);
+  return /* @__PURE__ */ jsx27(
+    FormFieldWrapper,
+    {
+      inputId: id,
+      label,
+      description,
+      required,
+      labelPlacement: options?.labelPlacement,
+      children: /* @__PURE__ */ jsx27(
+        TimeInput,
+        {
+          id,
+          value: typeof value === "string" ? value : "",
+          onChange,
+          onBlur: () => onBlur?.(id, value),
+          granularity,
+          placeholder,
+          required,
+          disabled,
+          error
+        }
+      )
+    }
+  );
+}
+
+// src/widgets/DateTimeWidget.tsx
+import { DateTimeInput } from "@petrarca/sonnet-ui";
+import { jsx as jsx28 } from "react/jsx-runtime";
+function resolveGranularity2(value) {
+  return value === "second" ? "second" : "minute";
+}
+function DateTimeWidget({
+  id,
+  value,
+  onChange,
+  onBlur,
+  required,
+  disabled,
+  rawErrors,
+  label,
+  description,
+  options
+}) {
+  const error = firstError(rawErrors);
+  const granularity = resolveGranularity2(options?.granularity);
+  const timeZone = typeof options?.timeZone === "string" ? options.timeZone : void 0;
+  const locale = typeof options?.locale === "string" ? options.locale : void 0;
+  return /* @__PURE__ */ jsx28(
+    FormFieldWrapper,
+    {
+      inputId: id,
+      label,
+      description,
+      required,
+      labelPlacement: options?.labelPlacement,
+      children: /* @__PURE__ */ jsx28(
+        DateTimeInput,
+        {
+          idPrefix: id,
+          value: typeof value === "string" ? value : "",
+          onChange,
+          onBlur: () => onBlur?.(id, value),
+          granularity,
+          timeZone,
+          locale,
+          required,
+          disabled,
+          error
+        }
+      )
+    }
+  );
+}
+
+// src/widgets/DisplayWidget.tsx
+import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+function DisplayWidget({
+  label,
+  description
+}) {
+  if (!label && !description) return null;
+  return /* @__PURE__ */ jsxs17("div", { className: "space-y-1", children: [
+    label && /* @__PURE__ */ jsx29("p", { className: "text-sm text-foreground", children: label }),
+    description && /* @__PURE__ */ jsx29("p", { className: "text-sm text-muted-foreground", children: description })
+  ] });
+}
+
+// src/widgets/OneOfWidget.tsx
+import { useMemo as useMemo6 } from "react";
+import {
+  getDiscriminator,
+  getBranchValue,
+  getBranchLabel,
+  findActiveBranch
+} from "@petrarca/sonnet-core/schema";
+import {
+  Label,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectContent,
+  SelectItem
+} from "@petrarca/sonnet-ui";
+import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+function buildChoices(branches, discriminator) {
+  return branches.map((branch, index) => {
+    const raw = discriminator ? getBranchValue(branch, discriminator) : void 0;
+    return {
+      index,
+      value: raw !== void 0 ? String(raw) : String(index),
+      label: getBranchLabel(branch, discriminator, index)
+    };
+  });
+}
+function buildBranchSchema(branch) {
+  if (!branch.properties) return null;
+  return {
+    title: branch.title || "",
+    type: "object",
+    properties: branch.properties,
+    required: branch.required,
+    ...branch["x-ui-order"] ? { "x-ui-order": branch["x-ui-order"] } : {}
+  };
+}
+function branchChangeData(choices, branches, discriminator, selected) {
+  const choice = choices.find((c) => c.value === selected);
+  if (!choice || !discriminator) return {};
+  const discValue = getBranchValue(branches[choice.index], discriminator) ?? selected;
+  return { [discriminator]: discValue };
+}
+function BranchSelector({
+  id,
+  label,
+  description,
+  choices,
+  activeValue,
+  disabled,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs18("div", { className: "space-y-1", children: [
+    label && /* @__PURE__ */ jsx30(Label, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs18(Select, { value: activeValue, onValueChange: onSelect, disabled, children: [
+      /* @__PURE__ */ jsx30(SelectTrigger, { id, children: /* @__PURE__ */ jsx30(SelectValue, { placeholder: "Select an option" }) }),
+      /* @__PURE__ */ jsx30(SelectContent, { children: choices.map((c) => /* @__PURE__ */ jsx30(SelectItem, { value: c.value, children: c.label }, c.value)) })
+    ] }),
+    description && /* @__PURE__ */ jsx30("p", { className: "text-sm text-muted-foreground", children: description })
+  ] });
+}
+function resolveActive(propertySchema, branches, choices, discriminator, data) {
+  const index = findActiveBranch(propertySchema, data, discriminator);
+  if (index < 0) return { value: "", label: "", subSchema: null };
+  return {
+    value: choices[index]?.value ?? "",
+    label: choices[index]?.label ?? "",
+    subSchema: buildBranchSchema(branches[index])
+  };
+}
+function OneOfWidget({
+  propertySchema,
+  value,
+  onChange,
+  registry,
+  uiSchema,
+  disabled,
+  readonly,
+  label,
+  description,
+  id,
+  options
+}) {
+  const { renderer: Renderer, templates } = useNestedFormContext();
+  const ContainerTemplate = templates.ObjectContainerTemplate ?? DefaultObjectContainerTemplate;
+  const branches = useMemo6(() => propertySchema.oneOf ?? [], [propertySchema]);
+  const discriminator = useMemo6(
+    () => getDiscriminator(propertySchema),
+    [propertySchema]
+  );
+  const choices = useMemo6(
+    () => buildChoices(branches, discriminator),
+    [branches, discriminator]
+  );
+  const data = value || {};
+  const active = resolveActive(
+    propertySchema,
+    branches,
+    choices,
+    discriminator,
+    data
+  );
+  if (branches.length === 0) return null;
+  const subUiSchema = uiSchema?.["x-ui-fields"] ?? {};
+  return /* @__PURE__ */ jsxs18("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx30(
+      BranchSelector,
+      {
+        id,
+        label,
+        description,
+        choices,
+        activeValue: active.value,
+        disabled: disabled || readonly,
+        onSelect: (selected) => onChange(branchChangeData(choices, branches, discriminator, selected))
+      }
+    ),
+    active.subSchema && /* @__PURE__ */ jsx30(
+      ContainerTemplate,
+      {
+        label: active.label,
+        description: void 0,
+        variant: options?.variant || "section",
+        defaultOpen: true,
+        children: /* @__PURE__ */ jsx30(
+          Renderer,
+          {
+            schema: active.subSchema,
+            data,
+            onChange,
+            disabled,
+            readOnly: readonly,
+            widgets: registry,
+            uiSchema: subUiSchema
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // src/widgets/widgetResolver.ts
 import {
   isNullableBoolean as isNullableBoolean2,
+  isOneOf,
   extractEnumValues as extractEnumValues2,
   getFieldType
 } from "@petrarca/sonnet-core/schema";
@@ -2710,8 +3014,11 @@ var DEFAULT_WIDGET_MAP = {
     // Uses email input type
     uri: "TextInputWidget",
     // Uses url input type
-    url: "TextInputWidget"
+    url: "TextInputWidget",
     // Uses url input type
+    date: "DateWidget",
+    "date-time": "DateTimeWidget",
+    time: "TimeWidget"
   },
   number: {
     default: "NumberWidget"
@@ -2722,6 +3029,9 @@ var DEFAULT_WIDGET_MAP = {
   },
   boolean: {
     default: "CheckboxWidget"
+  },
+  null: {
+    default: "DisplayWidget"
   }
 };
 function resolveWidgetByName(widgetName, propertySchema, registry) {
@@ -2771,6 +3081,7 @@ function registryLookup(registry, widgetName) {
   return registry[widgetName] || registry["TextInputWidget"];
 }
 function resolveFromSchemaStructure(schema, registry) {
+  if (isOneOf(schema)) return registryLookup(registry, "OneOfWidget");
   if (isNullableBoolean2(schema))
     return registryLookup(registry, "CheckboxWidget");
   if (extractEnumValues2(schema).length > 0)
@@ -2814,6 +3125,11 @@ var DEFAULT_WIDGETS = {
   ObjectWidget,
   ArrayWidget,
   QuantityWidget,
+  DateWidget,
+  TimeWidget,
+  DateTimeWidget,
+  DisplayWidget,
+  OneOfWidget,
   // Lowercase aliases for x-ui-widget convenience
   text: TextInputWidget,
   textarea: TextareaWidget,
@@ -2825,13 +3141,18 @@ var DEFAULT_WIDGETS = {
   "entity-select": EntitySelectWidget,
   object: ObjectWidget,
   array: ArrayWidget,
-  quantity: QuantityWidget
+  quantity: QuantityWidget,
+  date: DateWidget,
+  time: TimeWidget,
+  "date-time": DateTimeWidget,
+  display: DisplayWidget,
+  "one-of": OneOfWidget
 };
 
 // src/templates/HorizontalArrayItemTemplate.tsx
 import { Trash2 as Trash22, ChevronUp as ChevronUp2, ChevronDown as ChevronDown4 } from "lucide-react";
 import { Button as Button6 } from "@petrarca/sonnet-ui";
-import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
 function HorizontalArrayItemTemplate({
   children,
   index,
@@ -2855,7 +3176,7 @@ function HorizontalArrayItemTemplate({
   );
   const gap = resolvedLayout.gap ?? 8;
   const alignItems = resolvedLayout.compact ? "center" : "start";
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
       "data-fid": fid,
@@ -2867,8 +3188,8 @@ function HorizontalArrayItemTemplate({
       },
       children: [
         children,
-        orderable && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ jsx26(
+        orderable && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ jsx31(
             Button6,
             {
               type: "button",
@@ -2878,10 +3199,10 @@ function HorizontalArrayItemTemplate({
               onClick: onMoveUp,
               title: "Move up",
               className: "h-4 w-8 p-0",
-              children: /* @__PURE__ */ jsx26(ChevronUp2, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsx31(ChevronUp2, { className: "h-3 w-3" })
             }
           ),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx31(
             Button6,
             {
               type: "button",
@@ -2891,11 +3212,11 @@ function HorizontalArrayItemTemplate({
               onClick: onMoveDown,
               title: "Move down",
               className: "h-4 w-8 p-0",
-              children: /* @__PURE__ */ jsx26(ChevronDown4, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsx31(ChevronDown4, { className: "h-3 w-3" })
             }
           )
         ] }),
-        canRemove && /* @__PURE__ */ jsx26(
+        canRemove && /* @__PURE__ */ jsx31(
           Button6,
           {
             type: "button",
@@ -2905,7 +3226,7 @@ function HorizontalArrayItemTemplate({
             onClick: onRemove,
             title: "Remove item",
             className: "text-muted-foreground hover:text-destructive h-8 w-8 p-0",
-            children: /* @__PURE__ */ jsx26(Trash22, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ jsx31(Trash22, { className: "h-3.5 w-3.5" })
           }
         )
       ]
@@ -2913,13 +3234,123 @@ function HorizontalArrayItemTemplate({
   );
 }
 
+// src/templates/TabsGroupTemplate.tsx
+import { useState as useState7 } from "react";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@petrarca/sonnet-ui";
+
+// src/templates/GroupErrorBadge.tsx
+import { AlertCircle } from "lucide-react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+function GroupErrorBadge({
+  count
+}) {
+  if (count === 0) return null;
+  const label = count === 1 ? "1 field needs attention" : `${count} fields need attention`;
+  return /* @__PURE__ */ jsx32(
+    "span",
+    {
+      role: "img",
+      "aria-label": label,
+      title: label,
+      className: "inline-flex shrink-0 text-destructive",
+      children: /* @__PURE__ */ jsx32(AlertCircle, { className: "h-3.5 w-3.5" })
+    }
+  );
+}
+
+// src/templates/TabsGroupTemplate.tsx
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+function TabsGroupTemplate({
+  groups
+}) {
+  const [active, setActive] = useState7(groups[0].key);
+  const value = groups.some((g) => g.key === active) ? active : groups[0].key;
+  return /* @__PURE__ */ jsxs20(Tabs, { value, onValueChange: setActive, children: [
+    /* @__PURE__ */ jsx33(TabsList, { className: "mb-4", children: groups.map((g) => /* @__PURE__ */ jsxs20(TabsTrigger, { value: g.key, className: "gap-1.5", children: [
+      g.label,
+      /* @__PURE__ */ jsx33(GroupErrorBadge, { count: g.errorCount })
+    ] }, g.key)) }),
+    groups.map((g) => /* @__PURE__ */ jsx33(TabsContent, { value: g.key, className: "space-y-4", children: g.content }, g.key))
+  ] });
+}
+
+// src/templates/StepperGroupTemplate.tsx
+import { useState as useState8 } from "react";
+import {
+  Button as Button7,
+  Stepper,
+  StepperList,
+  StepperItem,
+  StepperTrigger,
+  StepperIndicator,
+  StepperSeparator,
+  StepperTitle,
+  StepperContent,
+  StepperPrev,
+  StepperNext
+} from "@petrarca/sonnet-ui";
+import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+function StepperGroupTemplate({
+  groups
+}) {
+  const [active, setActive] = useState8(groups[0].key);
+  const value = groups.some((g) => g.key === active) ? active : groups[0].key;
+  const isLast = value === groups[groups.length - 1].key;
+  return /* @__PURE__ */ jsxs21(Stepper, { value, onValueChange: setActive, children: [
+    /* @__PURE__ */ jsx34(StepperList, { className: "mb-4 gap-2", children: groups.map((g) => /* @__PURE__ */ jsxs21(StepperItem, { value: g.key, children: [
+      /* @__PURE__ */ jsxs21(StepperTrigger, { children: [
+        /* @__PURE__ */ jsx34(StepperIndicator, {}),
+        /* @__PURE__ */ jsxs21(StepperTitle, { className: "inline-flex items-center gap-1.5", children: [
+          g.label,
+          /* @__PURE__ */ jsx34(GroupErrorBadge, { count: g.errorCount })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx34(StepperSeparator, {})
+    ] }, g.key)) }),
+    groups.map((g) => /* @__PURE__ */ jsx34(StepperContent, { value: g.key, className: "space-y-4", children: g.content }, g.key)),
+    /* @__PURE__ */ jsxs21("div", { className: "mt-4 flex justify-between", children: [
+      /* @__PURE__ */ jsx34(StepperPrev, { asChild: true, children: /* @__PURE__ */ jsx34(Button7, { variant: "outline", size: "sm", children: "Back" }) }),
+      !isLast && /* @__PURE__ */ jsx34(StepperNext, { asChild: true, children: /* @__PURE__ */ jsx34(Button7, { size: "sm", children: "Next" }) })
+    ] })
+  ] });
+}
+
+// src/templates/SectionsGroupTemplate.tsx
+import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+function SectionsGroupTemplate({
+  groups
+}) {
+  return /* @__PURE__ */ jsx35("div", { className: "space-y-6", children: groups.map((g) => /* @__PURE__ */ jsxs22(
+    "fieldset",
+    {
+      className: "rounded-md border border-border/60 px-3 pb-3 pt-1",
+      children: [
+        /* @__PURE__ */ jsxs22("legend", { className: "inline-flex items-center gap-1.5 px-1 text-sm font-medium text-muted-foreground", children: [
+          g.label,
+          /* @__PURE__ */ jsx35(GroupErrorBadge, { count: g.errorCount })
+        ] }),
+        /* @__PURE__ */ jsx35("div", { className: "space-y-4", children: g.content })
+      ]
+    },
+    g.key
+  )) });
+}
+
 // src/templates/index.ts
 var DEFAULT_TEMPLATES = {
   ArrayItemTemplate: DefaultArrayItemTemplate,
   HorizontalArrayItemTemplate,
   ArrayHeaderTemplate: DefaultArrayHeaderTemplate,
-  ObjectContainerTemplate: DefaultObjectContainerTemplate
+  ObjectContainerTemplate: DefaultObjectContainerTemplate,
+  TabsGroupTemplate,
+  StepperGroupTemplate,
+  SectionsGroupTemplate
 };
+function groupTemplateKey(variant) {
+  if (!variant) return "TabsGroupTemplate";
+  const name = variant.charAt(0).toUpperCase() + variant.slice(1);
+  return `${name}GroupTemplate`;
+}
 
 // src/FormFieldRenderer.tsx
 import { warnLog } from "@petrarca/sonnet-core";
@@ -2928,7 +3359,7 @@ import {
   getFieldHelpText,
   getFieldPlaceholder
 } from "@petrarca/sonnet-core/schema";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function mergeFieldOptions(globalOptions, property, uiSchema) {
   const xWidgetOptions = property["x-ui-options"] || {};
   const fieldOptions = uiSchema?.["x-ui-options"] || {};
@@ -2955,7 +3386,7 @@ function applyFieldWidth(widget, uiSchema, mergedOptions) {
   }
   const width = candidate && candidate in FIELD_WIDTH_CLASS ? candidate : "full";
   if (width === "full") return widget;
-  return /* @__PURE__ */ jsx27("div", { className: FIELD_WIDTH_CLASS[width], children: widget });
+  return /* @__PURE__ */ jsx36("div", { className: FIELD_WIDTH_CLASS[width], children: widget });
 }
 function resolvePresentationText(property, uiSchema) {
   return {
@@ -3005,7 +3436,7 @@ function FormFieldRenderer({
     uiSchema?.["x-ui-title"],
     globalOptions.label
   );
-  const widget = /* @__PURE__ */ jsx27(
+  const widget = /* @__PURE__ */ jsx36(
     Widget,
     {
       id: `${idPrefix}-${fieldName}`,
@@ -3031,7 +3462,7 @@ function FormFieldRenderer({
 }
 
 // src/hooks/useFormEngine.ts
-import { useState as useState7, useEffect as useEffect3, useMemo as useMemo6, useCallback as useCallback7, useRef as useRef5 } from "react";
+import { useState as useState9, useEffect as useEffect3, useMemo as useMemo7, useCallback as useCallback7, useRef as useRef5 } from "react";
 import { isEqual } from "@petrarca/sonnet-core";
 import {
   getSchemaProperties,
@@ -3099,14 +3530,18 @@ function useFormEngine({
   showActions = false,
   deferChanges = false,
   deferStateUpdates = false,
-  allowPristineSave = false
+  allowPristineSave = false,
+  refResolver
 }) {
-  const refResolvedSchema = useMemo6(() => resolveRefs(schema), [schema]);
-  const [originalData, setOriginalData] = useState7(
+  const refResolvedSchema = useMemo7(
+    () => resolveRefs(schema, refResolver),
+    [schema, refResolver]
+  );
+  const [originalData, setOriginalData] = useState9(
     () => applySchemaDefaults2(data, refResolvedSchema)
   );
-  const [originalDataInitialized, setOriginalDataInitialized] = useState7(false);
-  const [nonSchemaData, setNonSchemaData] = useState7(
+  const [originalDataInitialized, setOriginalDataInitialized] = useState9(false);
+  const [nonSchemaData, setNonSchemaData] = useState9(
     () => {
       const props = getSchemaProperties(refResolvedSchema);
       const names = Object.keys(props);
@@ -3115,26 +3550,23 @@ function useFormEngine({
       );
     }
   );
-  const [formData, setFormData] = useState7(
+  const [formData, setFormData] = useState9(
     () => applySchemaDefaults2(data, refResolvedSchema)
   );
-  const [pendingChanges, setPendingChanges] = useState7({});
-  const resolvedSchema = useMemo6(
+  const formDataRef = useRef5(formData);
+  formDataRef.current = formData;
+  const [pendingChanges, setPendingChanges] = useState9({});
+  const resolvedSchema = useMemo7(
     () => resolveSchema(refResolvedSchema, formData),
     [refResolvedSchema, formData]
   );
-  const orderedProperties = useMemo6(() => {
+  const orderedProperties = useMemo7(() => {
     const properties2 = getSchemaProperties(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 [isValid, setIsValid] = useState7(() => {
-    const initResolved = resolveSchema(refResolvedSchema, data);
-    const validation = validateFormData(initResolved, data);
-    return validation.isValid;
-  });
-  const [initialDefaultsSent, setInitialDefaultsSent] = useState7(false);
+  const [initialDefaultsSent, setInitialDefaultsSent] = useState9(false);
   const properties = getSchemaProperties(resolvedSchema);
   useEffect3(() => {
     if (!initialDefaultsSent) {
@@ -3181,8 +3613,6 @@ function useFormEngine({
         setOriginalDataInitialized(true);
       }
     }
-    const validation = validateFormData(resolvedSchema, newData);
-    setIsValid(validation.isValid);
   }, [
     data,
     refResolvedSchema,
@@ -3191,21 +3621,31 @@ function useFormEngine({
     originalData,
     originalDataInitialized
   ]);
-  const hasChanges = useMemo6(
+  const hasChanges = useMemo7(
     () => !isEqual(formData, originalData),
     [formData, originalData]
   );
-  const displayData = useMemo6(() => {
+  const displayData = useMemo7(() => {
     if (deferStateUpdates && Object.keys(pendingChanges).length > 0) {
       return { ...formData, ...pendingChanges };
     }
     return formData;
   }, [formData, pendingChanges, deferStateUpdates]);
+  const validation = useMemo7(
+    () => validateFormData(resolvedSchema, displayData),
+    [resolvedSchema, displayData]
+  );
+  const { isValid, fieldErrors } = validation;
+  const onValidationChangeRef = useRef5(onValidationChange);
+  onValidationChangeRef.current = onValidationChange;
+  useEffect3(() => {
+    onValidationChangeRef.current?.(validation.errors, validation.isValid);
+  }, [validation]);
   const handleFieldChange = useCallback7(
     (fieldName, value) => {
       if (readOnly) return;
       const immediate = isImmediateField(fieldName, properties);
-      if (showActions && deferStateUpdates && !immediate) {
+      if (deferStateUpdates && !immediate) {
         setPendingChanges((prev) => ({ ...prev, [fieldName]: value }));
         return;
       }
@@ -3215,11 +3655,6 @@ function useFormEngine({
         const shouldCallOnChange = !deferChanges || immediate;
         if (shouldCallOnChange && onChange) onChange(newData);
       }
-      const validation = validateFormData(resolvedSchema, newData);
-      setIsValid(validation.isValid);
-      if (onValidationChange) {
-        onValidationChange(validation.errors, validation.isValid);
-      }
     },
     [
       readOnly,
@@ -3228,14 +3663,12 @@ function useFormEngine({
       deferStateUpdates,
       showActions,
       onChange,
-      resolvedSchema,
-      onValidationChange,
       properties
     ]
   );
   const flushPendingField = useCallback7(
     (fieldName) => {
-      if (!showActions || !deferStateUpdates) return;
+      if (!deferStateUpdates) return;
       if (pendingChanges[fieldName] === void 0) return;
       const newData = { ...formData, ...pendingChanges };
       setFormData(newData);
@@ -3244,37 +3677,26 @@ function useFormEngine({
         delete updated[fieldName];
         return updated;
       });
-      const validation = validateFormData(resolvedSchema, newData);
-      setIsValid(validation.isValid);
-      if (onValidationChange) {
-        onValidationChange(validation.errors, validation.isValid);
-      }
+      if (!showActions && onChange) onChange(newData);
     },
-    [
-      showActions,
-      deferStateUpdates,
-      pendingChanges,
-      formData,
-      resolvedSchema,
-      onValidationChange
-    ]
+    [showActions, deferStateUpdates, pendingChanges, formData, onChange]
   );
   const handleFieldBlur = useCallback7(
     (fieldName) => {
       if (readOnly) return;
       flushPendingField(fieldName);
+      const latest = formDataRef.current;
       if (!showActions && deferChanges && onChange) {
-        onChange(formData);
+        onChange(latest);
       }
       if (onBlur) {
         const hasPending = deferStateUpdates && pendingChanges[fieldName] !== void 0;
-        const dataToPass = hasPending ? { ...formData, [fieldName]: pendingChanges[fieldName] } : formData;
+        const dataToPass = hasPending ? { ...latest, [fieldName]: pendingChanges[fieldName] } : latest;
         onBlur(fieldName, dataToPass);
       }
     },
     [
       readOnly,
-      formData,
       pendingChanges,
       deferChanges,
       deferStateUpdates,
@@ -3288,8 +3710,8 @@ function useFormEngine({
     if (!hasChanges && !allowPristineSave) return;
     const finalData = deferStateUpdates && Object.keys(pendingChanges).length > 0 ? { ...formData, ...pendingChanges } : formData;
     const completeData = { ...nonSchemaData, ...finalData };
-    const validation = validateFormData(resolvedSchema, finalData);
-    if (validation.isValid && onUpdate) {
+    const validation2 = validateFormData(resolvedSchema, finalData);
+    if (validation2.isValid && onUpdate) {
       const changed = {};
       for (const key of Object.keys(finalData)) {
         if (!isEqual(finalData[key], originalData[key])) {
@@ -3323,6 +3745,7 @@ function useFormEngine({
     orderedProperties,
     hasChanges,
     isValid,
+    fieldErrors,
     handleFieldChange,
     handleFieldBlur,
     handleSave,
@@ -3331,7 +3754,7 @@ function useFormEngine({
 }
 
 // src/JsonSchemaFormRenderer.tsx
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function stripFids(data) {
   const result = {};
   for (const [key, value] of Object.entries(data)) {
@@ -3398,7 +3821,7 @@ function useWrappedCallbacks(onChange, onBlur, onUpdate) {
 function buildFieldMap(fields) {
   const map = /* @__PURE__ */ new Map();
   for (const field of fields) {
-    if (React11.isValidElement(field) && field.key != null) {
+    if (React13.isValidElement(field) && field.key != null) {
       map.set(String(field.key), field);
     }
   }
@@ -3417,12 +3840,12 @@ function resolveGridColumns(row, fieldCount) {
 }
 function wrapInGroup(group, key, content) {
   if (!group) return content;
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs23(
     "fieldset",
     {
       className: "rounded-md border border-border/60 px-3 pb-3 pt-1",
       children: [
-        /* @__PURE__ */ jsx28("legend", { className: "px-1 text-sm font-medium text-muted-foreground", children: group }),
+        /* @__PURE__ */ jsx37("legend", { className: "px-1 text-sm font-medium text-muted-foreground", children: group }),
         content
       ]
     },
@@ -3444,7 +3867,7 @@ function buildRowElement(row, fieldMap, defaultRowGap) {
     gridTemplateColumns: resolveGridColumns(row, rowFields.length),
     gap: `${rowGap}px`
   };
-  const inner = /* @__PURE__ */ jsx28("div", { style, children: rowFields }, `row:${rowKey}`);
+  const inner = /* @__PURE__ */ jsx37("div", { style, children: rowFields }, `row:${rowKey}`);
   return {
     element: wrapInGroup(row.group, rowKey, inner),
     placed: row.fields
@@ -3453,24 +3876,92 @@ function buildRowElement(row, fieldMap, defaultRowGap) {
 function collectUnplacedFields(fields, placed) {
   const result = [];
   for (const field of fields) {
-    if (React11.isValidElement(field) && field.key != null && !placed.has(String(field.key))) {
+    if (React13.isValidElement(field) && field.key != null && !placed.has(String(field.key))) {
       result.push(field);
     }
   }
   return result;
 }
-function layoutFieldsInRows(fields, rowDefs, defaultRowGap) {
-  const fieldMap = buildFieldMap(fields);
-  const placed = /* @__PURE__ */ new Set();
+function buildRows(rowDefs, fieldMap, defaultRowGap, placed) {
   const elements = [];
   for (const row of rowDefs) {
     const result = buildRowElement(row, fieldMap, defaultRowGap);
-    if (result == null) continue;
-    elements.push(result.element);
-    for (const name of result.placed) placed.add(name);
+    for (const name of row.fields) placed.add(name);
+    if (result != null) elements.push(result.element);
   }
+  return elements;
+}
+function layoutFieldsInRows(fields, rowDefs, defaultRowGap) {
+  const placed = /* @__PURE__ */ new Set();
+  const elements = buildRows(
+    rowDefs,
+    buildFieldMap(fields),
+    defaultRowGap,
+    placed
+  );
   return elements.concat(collectUnplacedFields(fields, placed));
 }
+function pointerRoot(pointer) {
+  const token = pointer.split("/")[1] ?? "";
+  return token.replace(/~1/g, "/").replace(/~0/g, "~");
+}
+function groupErrorCount(tab, fieldErrors) {
+  if (fieldErrors.length === 0) return 0;
+  const owned = new Set(tab.rows.flatMap((row) => row.fields));
+  return fieldErrors.filter((e) => owned.has(pointerRoot(e.pointer))).length;
+}
+function groupVisibility(groupDefs, formData) {
+  const visible = groupDefs.map(
+    (tab) => evaluateUiRule(tab.rule, formData).visible
+  );
+  return { visible, allHidden: !visible.some(Boolean) };
+}
+function hiddenGroupFieldNames(groupDefs, formData) {
+  const hidden = /* @__PURE__ */ new Set();
+  const { visible, allHidden } = groupVisibility(groupDefs, formData);
+  if (allHidden) return hidden;
+  groupDefs.forEach((tab, i) => {
+    if (visible[i]) return;
+    for (const row of tab.rows) for (const f of row.fields) hidden.add(f);
+  });
+  return hidden;
+}
+function resolveGroupTemplate(templates, variant) {
+  const registered = templates[groupTemplateKey(variant)];
+  if (typeof registered === "function") {
+    return registered;
+  }
+  return DEFAULT_TEMPLATES.TabsGroupTemplate;
+}
+function HiddenErrorNotice({
+  count
+}) {
+  if (count === 0) return null;
+  return /* @__PURE__ */ jsxs23("p", { className: "flex items-center gap-1.5 text-sm text-destructive", children: [
+    /* @__PURE__ */ jsx37(AlertCircle2, { className: "h-4 w-4 shrink-0" }),
+    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 layoutFieldsInGroups(fields, groupDefs, defaultRowGap, fieldErrors, formData, GroupTemplate) {
+  const fieldMap = buildFieldMap(fields);
+  const placed = /* @__PURE__ */ new Set();
+  const { visible, allHidden } = groupVisibility(groupDefs, formData);
+  const built = groupDefs.map((tab, index) => ({
+    index,
+    rows: buildRows(tab.rows, fieldMap, defaultRowGap, placed)
+  }));
+  const unplaced = collectUnplacedFields(fields, placed);
+  if (allHidden) {
+    return [...built.flatMap((b) => b.rows), ...unplaced];
+  }
+  const groups = built.filter((b) => visible[b.index]).map((b) => ({
+    key: `group-${b.index}`,
+    label: groupDefs[b.index].label,
+    content: b.rows,
+    errorCount: groupErrorCount(groupDefs[b.index], fieldErrors)
+  }));
+  return [/* @__PURE__ */ jsx37(GroupTemplate, { groups }, "form:groups"), ...unplaced];
+}
 function FormContainer({
   displayContents,
   showExtraProperties,
@@ -3486,15 +3977,17 @@ function FormContainer({
   cancelLabel,
   showCancel,
   leadingActions,
+  hiddenErrorCount,
   children
 }) {
   if (displayContents) {
-    return /* @__PURE__ */ jsx28("div", { style: { display: "contents" }, children });
+    return /* @__PURE__ */ jsx37("div", { style: { display: "contents" }, children });
   }
-  return /* @__PURE__ */ jsxs18(SimpleStack, { gap: "md", children: [
+  return /* @__PURE__ */ jsxs23(SimpleStack, { gap: "md", children: [
     children,
-    showExtraProperties && /* @__PURE__ */ jsx28(ExtraPropertiesCard_default, { properties: formData, schema: resolvedSchema }),
-    showActions && /* @__PURE__ */ jsx28(
+    showExtraProperties && /* @__PURE__ */ jsx37(ExtraPropertiesCard_default, { properties: formData, schema: resolvedSchema }),
+    /* @__PURE__ */ jsx37(HiddenErrorNotice, { count: hiddenErrorCount }),
+    showActions && /* @__PURE__ */ jsx37(
       FormActions,
       {
         onSave: handleSave,
@@ -3543,6 +4036,7 @@ function JsonSchemaFormRenderer(props) {
     orderedProperties,
     hasChanges,
     isValid,
+    fieldErrors,
     handleFieldChange,
     handleFieldBlur,
     handleSave,
@@ -3560,22 +4054,23 @@ function JsonSchemaFormRenderer(props) {
     showActions,
     deferChanges,
     deferStateUpdates,
-    allowPristineSave
+    allowPristineSave,
+    refResolver: props.refResolver
   });
   const layoutLabelPlacement = uiSchema["x-ui-layout"]?.labelPlacement;
-  const globalOptions = useMemo7(
+  const globalOptions = useMemo8(
     () => ({
       ...layoutLabelPlacement ? { labelPlacement: layoutLabelPlacement } : {},
       ...uiSchema["x-ui-globalOptions"] || {}
     }),
     [layoutLabelPlacement, uiSchema]
   );
-  const resolvedTemplates = useMemo7(
+  const resolvedTemplates = useMemo8(
     () => ({ ...DEFAULT_TEMPLATES, ...templates }),
     [templates]
   );
   const nestedRenderer = useCallback8(
-    (props2) => /* @__PURE__ */ jsx28(
+    (props2) => /* @__PURE__ */ jsx37(
       JsonSchemaFormRenderer,
       {
         ...props2,
@@ -3586,32 +4081,39 @@ function JsonSchemaFormRenderer(props) {
     ),
     [resolvedTemplates]
   );
-  const contextValue = useMemo7(
+  const contextValue = useMemo8(
     () => ({ renderer: nestedRenderer, templates: resolvedTemplates }),
     [nestedRenderer, resolvedTemplates]
   );
   const needsBlurHandler = deferStateUpdates || !!onBlur;
-  const fields = useMemo7(
-    () => orderedProperties.map(([fieldName, property]) => /* @__PURE__ */ jsx28(
-      FormFieldRenderer,
-      {
-        fieldName,
-        property,
-        value: displayData[fieldName],
-        onChange: (v) => handleFieldChange(fieldName, v),
-        onBlur: needsBlurHandler ? () => handleFieldBlur(fieldName) : void 0,
-        required: isFieldRequired(resolvedSchema, fieldName),
-        disabled,
-        readOnly,
-        schema,
-        uiSchema: uiSchema[fieldName],
-        registry: widgets,
-        globalOptions,
-        formData: displayData,
-        idPrefix
-      },
-      fieldName
-    )),
+  const fields = useMemo8(
+    () => orderedProperties.flatMap(([fieldName, property]) => {
+      const rule = uiSchema[fieldName]?.["x-ui-rule"] ?? property["x-ui-rule"];
+      const { visible, enabled } = evaluateUiRule(rule, displayData);
+      if (!visible) return [];
+      return [
+        /* @__PURE__ */ jsx37(
+          FormFieldRenderer,
+          {
+            fieldName,
+            property,
+            value: displayData[fieldName],
+            onChange: (v) => handleFieldChange(fieldName, v),
+            onBlur: needsBlurHandler ? () => handleFieldBlur(fieldName) : void 0,
+            required: isFieldRequired(resolvedSchema, fieldName),
+            disabled: disabled || !enabled,
+            readOnly,
+            schema,
+            uiSchema: uiSchema[fieldName],
+            registry: widgets,
+            globalOptions,
+            formData: displayData,
+            idPrefix
+          },
+          fieldName
+        )
+      ];
+    }),
     [
       orderedProperties,
       displayData,
@@ -3630,12 +4132,43 @@ function JsonSchemaFormRenderer(props) {
   );
   const layoutConfig = uiSchema["x-ui-layout"];
   const rowDefs = layoutConfig?.rows;
+  const groupDefs = layoutConfig?.groups;
   const defaultRowGap = layoutConfig?.gap ?? 24;
-  const layoutFields = useMemo7(
-    () => rowDefs && rowDefs.length > 0 ? layoutFieldsInRows(fields, rowDefs, defaultRowGap) : fields,
-    [fields, rowDefs, defaultRowGap]
+  const groupTemplate = resolveGroupTemplate(
+    resolvedTemplates,
+    layoutConfig?.variant
   );
-  return /* @__PURE__ */ jsx28(NestedFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx28(
+  const layoutFields = useMemo8(() => {
+    if (groupDefs && groupDefs.length > 0) {
+      return layoutFieldsInGroups(
+        fields,
+        groupDefs,
+        defaultRowGap,
+        fieldErrors,
+        displayData,
+        groupTemplate
+      );
+    }
+    if (rowDefs && rowDefs.length > 0) {
+      return layoutFieldsInRows(fields, rowDefs, defaultRowGap);
+    }
+    return fields;
+  }, [
+    fields,
+    rowDefs,
+    groupDefs,
+    defaultRowGap,
+    fieldErrors,
+    displayData,
+    groupTemplate
+  ]);
+  const hiddenErrorCount = useMemo8(() => {
+    if (!groupDefs?.length || fieldErrors.length === 0) return 0;
+    const hidden = hiddenGroupFieldNames(groupDefs, displayData);
+    if (hidden.size === 0) return 0;
+    return fieldErrors.filter((e) => hidden.has(pointerRoot(e.pointer))).length;
+  }, [groupDefs, fieldErrors, displayData]);
+  return /* @__PURE__ */ jsx37(NestedFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx37(
     FormContainer,
     {
       displayContents,
@@ -3652,13 +4185,14 @@ function JsonSchemaFormRenderer(props) {
       cancelLabel,
       showCancel,
       leadingActions,
+      hiddenErrorCount,
       children: layoutFields
     }
   ) });
 }
 
 // src/hooks/useResolvedSchema.ts
-import { useMemo as useMemo8 } from "react";
+import { useMemo as useMemo9 } from "react";
 import {
   getSchemaProperties as getSchemaProperties2,
   resolveSchema as resolveSchema2
@@ -3668,11 +4202,11 @@ function useResolvedSchema({
   formData,
   uiSchema
 }) {
-  const resolvedSchema = useMemo8(
+  const resolvedSchema = useMemo9(
     () => resolveSchema2(schema, formData),
     [schema, formData]
   );
-  const orderedProperties = useMemo8(() => {
+  const orderedProperties = useMemo9(() => {
     const properties = getSchemaProperties2(resolvedSchema);
     const rawOrder = uiSchema["x-ui-order"] ?? resolvedSchema["x-ui-order"];
     const orderArray = Array.isArray(rawOrder) ? rawOrder : void 0;
@@ -3686,6 +4220,9 @@ export {
   DEFAULT_TEMPLATES,
   DEFAULT_WIDGETS,
   DEFAULT_WIDGET_MAP,
+  DateTimeWidget,
+  DateWidget,
+  DisplayWidget,
   EntitySelectWidget,
   ExtraPropertiesCard_default as ExtraPropertiesCard,
   FormActions,
@@ -3699,18 +4236,25 @@ export {
   FormSelect,
   FormTagsInput,
   FormTextarea,
+  GroupErrorBadge,
   JsonEditorWidget,
   JsonSchemaFormRenderer,
   NumberWidget,
   ObjectWidget,
+  OneOfWidget,
   QuantityWidget,
+  SectionsGroupTemplate,
   SelectWidget,
+  StepperGroupTemplate,
+  TabsGroupTemplate,
   TagsInputWidget,
   TextInputWidget,
   TextareaWidget,
+  TimeWidget,
   firstError,
   getAriaDescribedBy,
   getDefaultWidgetForType,
+  groupTemplateKey,
   resolveWidget,
   useFormEngine,
   useNestedFormContext,