@petrarca/sonnet-forms 0.4.2 → 0.6.0

package/dist/index.js

@@ -8,39 +8,39 @@ function FormFieldWrapper({
   error,
   required,
   compact,
+  labelPlacement = "top",
   className,
   children
 }) {
-  const showChrome = !compact;
-  return /* @__PURE__ */ jsxs("div", { className: cn(showChrome && "space-y-2", className), children: [
-    showChrome && !!label && /* @__PURE__ */ jsxs(
-      "label",
-      {
-        htmlFor: inputId,
-        className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        children: [
-          label,
-          required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
-        ]
-      }
-    ),
-    showChrome && description && /* @__PURE__ */ jsx(
-      "p",
-      {
-        id: `${inputId}-description`,
-        className: "text-sm text-muted-foreground",
-        children: description
-      }
-    ),
+  if (compact) return /* @__PURE__ */ jsx("div", { className, children });
+  const labelEl = !!label && /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+      children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { className: "ml-1 text-destructive", children: "*" })
+      ]
+    }
+  );
+  const descriptionEl = description && /* @__PURE__ */ jsx("p", { id: `${inputId}-description`, className: "text-sm text-muted-foreground", children: description });
+  const errorEl = error && /* @__PURE__ */ jsx("p", { id: `${inputId}-error`, className: "text-sm font-medium text-destructive", children: error });
+  if (labelPlacement === "start" && !!label) {
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+      /* @__PURE__ */ jsx("div", { className: "shrink-0 whitespace-nowrap", children: labelEl }),
+      /* @__PURE__ */ jsxs("div", { className: "w-full min-w-0 space-y-1", children: [
+        descriptionEl,
+        children,
+        errorEl
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), children: [
+    labelEl,
+    descriptionEl,
     children,
-    showChrome && error && /* @__PURE__ */ jsx(
-      "p",
-      {
-        id: `${inputId}-error`,
-        className: "text-sm font-medium text-destructive",
-        children: error
-      }
-    )
+    errorEl
   ] });
 }
 
@@ -84,6 +84,7 @@ var FormInput = React.forwardRef(
     rightSection,
     rightSectionWidth,
     compact,
+    labelPlacement,
     ...props
   }, ref) => {
     const generatedId = useId();
@@ -98,6 +99,7 @@ var FormInput = React.forwardRef(
         error,
         required,
         compact,
+        labelPlacement,
         className: wrapperClassName,
         children: /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
           /* @__PURE__ */ jsx2(
@@ -170,16 +172,21 @@ var FormTextarea = React2.forwardRef((allProps, ref) => {
     error,
     required,
     wrapperClassName,
+    labelPlacement,
     className,
     id,
     value,
     onChange,
     rightSection,
     rightSectionWidth,
+    // Destructured out so they are not spread onto the DOM textarea below;
+    // these are component-level props, not valid HTML attributes.
+    autosize: autosizeProp,
+    minRows: minRowsProp,
     ...props
   } = allProps;
-  const autosize = allProps.autosize ?? false;
-  const minRows = allProps.minRows ?? 3;
+  const autosize = autosizeProp ?? false;
+  const minRows = minRowsProp ?? 3;
   const generatedId = useId2();
   const textareaId = id ?? generatedId;
   const internalRef = useRef(null);
@@ -196,6 +203,7 @@ var FormTextarea = React2.forwardRef((allProps, ref) => {
       description,
       error,
       required,
+      labelPlacement,
       className: cn3("flex flex-col", wrapperClassName),
       children: /* @__PURE__ */ jsxs3("div", { className: "relative flex-1 min-h-0", children: [
         /* @__PURE__ */ jsx3(
@@ -246,7 +254,8 @@ var FormNumberInput = React3.forwardRef(
     wrapperClassName,
     className,
     id,
-    name
+    name,
+    labelPlacement
   }, ref) => {
     const generatedId = useId3();
     const inputId = id ?? generatedId;
@@ -269,6 +278,7 @@ var FormNumberInput = React3.forwardRef(
         description,
         error,
         required,
+        labelPlacement,
         className: wrapperClassName,
         children: /* @__PURE__ */ jsx4(
           Input2,
@@ -422,7 +432,7 @@ FormCheckbox.displayName = "FormCheckbox";
 
 // src/FormSelect.tsx
 import * as React5 from "react";
-import { Check, ChevronsUpDown, X } from "lucide-react";
+import { Check, ChevronsUpDown, Plus, X } from "lucide-react";
 import { cn as cn6 } from "@petrarca/sonnet-core";
 import { Button } from "@petrarca/sonnet-ui";
 import {
@@ -434,12 +444,28 @@ import {
   CommandList
 } from "@petrarca/sonnet-ui";
 import { Popover, PopoverContent, PopoverTrigger } from "@petrarca/sonnet-ui";
+
+// src/formSelectUtils.ts
+function canCreateFromSearch(allowCreate, searchQuery, options) {
+  const trimmed = searchQuery.trim();
+  if (!allowCreate || trimmed.length === 0) return false;
+  const lower = trimmed.toLowerCase();
+  return !options.some((o) => o.label.toLowerCase() === lower);
+}
+
+// src/FormSelect.tsx
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function useSelectState(value, onChange, onBlur) {
+function useSelectState(value, onChange, onBlur, onCreate, clearable) {
   const [open, setOpen] = React5.useState(false);
   const [searchQuery, setSearchQuery] = React5.useState("");
   const handleSelect = (selectedValue) => {
-    onChange?.(selectedValue === value ? null : selectedValue);
+    const next = clearable && selectedValue === value ? null : selectedValue;
+    onChange?.(next);
+    setOpen(false);
+    setSearchQuery("");
+  };
+  const handleCreate = (label) => {
+    onCreate?.(label);
     setOpen(false);
     setSearchQuery("");
   };
@@ -458,6 +484,7 @@ function useSelectState(value, onChange, onBlur) {
     searchQuery,
     setSearchQuery,
     handleSelect,
+    handleCreate,
     handleClear,
     handleOpenChange
   };
@@ -479,8 +506,11 @@ function SelectDropdown({
   emptyMessage,
   options,
   value,
-  onSelect
+  onSelect,
+  allowCreate = false,
+  onCreate
 }) {
+  const showCreate = canCreateFromSearch(allowCreate, searchQuery, options);
   return /* @__PURE__ */ jsxs5(Command, { shouldFilter: false, children: [
     /* @__PURE__ */ jsx6(
       CommandInput,
@@ -491,29 +521,45 @@ function SelectDropdown({
       }
     ),
     /* @__PURE__ */ jsxs5(CommandList, { children: [
-      /* @__PURE__ */ jsx6(CommandEmpty, { children: loading ? "Loading..." : emptyMessage }),
-      /* @__PURE__ */ jsx6(CommandGroup, { children: options.filter(
-        (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
-      ).map((option) => /* @__PURE__ */ jsxs5(
-        CommandItem,
-        {
-          value: option.value,
-          onSelect,
-          children: [
-            /* @__PURE__ */ jsx6(
-              Check,
-              {
-                className: cn6(
-                  "mr-2 h-4 w-4",
-                  value === option.value ? "opacity-100" : "opacity-0"
-                )
-              }
-            ),
-            option.label
-          ]
-        },
-        option.value
-      )) })
+      !showCreate && /* @__PURE__ */ jsx6(CommandEmpty, { children: loading ? "Loading..." : emptyMessage }),
+      /* @__PURE__ */ jsxs5(CommandGroup, { children: [
+        options.filter(
+          (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
+        ).map((option) => /* @__PURE__ */ jsxs5(
+          CommandItem,
+          {
+            value: option.value,
+            onSelect,
+            children: [
+              /* @__PURE__ */ jsx6(
+                Check,
+                {
+                  className: cn6(
+                    "mr-2 h-4 w-4",
+                    value === option.value ? "opacity-100" : "opacity-0"
+                  )
+                }
+              ),
+              option.label
+            ]
+          },
+          option.value
+        )),
+        showCreate && /* @__PURE__ */ jsxs5(
+          CommandItem,
+          {
+            value: `__create__${searchQuery}`,
+            onSelect: () => onCreate?.(searchQuery.trim()),
+            children: [
+              /* @__PURE__ */ jsx6(Plus, { className: "mr-2 h-4 w-4" }),
+              "Create \u201C",
+              searchQuery.trim(),
+              "\u201D"
+            ]
+          },
+          "__create__"
+        )
+      ] })
     ] })
   ] });
 }
@@ -536,13 +582,16 @@ function FormSelect(props) {
     required,
     wrapperClassName,
     compact,
+    labelPlacement,
     options,
     value,
     onChange,
     onBlur,
     className,
     id,
-    autoFocus
+    autoFocus,
+    allowCreate,
+    onCreate
   } = props;
   const {
     placeholder,
@@ -560,9 +609,10 @@ function FormSelect(props) {
     searchQuery,
     setSearchQuery,
     handleSelect,
+    handleCreate,
     handleClear,
     handleOpenChange
-  } = useSelectState(value, onChange, onBlur);
+  } = useSelectState(value, onChange, onBlur, onCreate, clearable);
   const selectedOption = options.find((opt) => opt.value === value);
   const isDisabled = disabled || readOnly || loading;
   return /* @__PURE__ */ jsx6(
@@ -574,6 +624,7 @@ function FormSelect(props) {
       error,
       required,
       compact,
+      labelPlacement,
       className: wrapperClassName,
       children: /* @__PURE__ */ jsxs5(Popover, { open, onOpenChange: handleOpenChange, children: [
         /* @__PURE__ */ jsx6(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs5(
@@ -627,7 +678,9 @@ function FormSelect(props) {
                 emptyMessage,
                 options,
                 value,
-                onSelect: handleSelect
+                onSelect: handleSelect,
+                allowCreate,
+                onCreate: handleCreate
               }
             )
           }
@@ -661,13 +714,22 @@ function RemovableBadge({
 }) {
   return /* @__PURE__ */ jsxs6(Badge, { variant: "secondary", badgeColor, className: "mr-1", children: [
     option.label,
-    !isDisabled && /* @__PURE__ */ jsx7(
-      "button",
+    !isDisabled && // Rendered as a role="button" span, not a <button>: this badge lives
+    // inside the combobox trigger <button>, and a button cannot be nested
+    // in a button (invalid HTML / hydration error). The span keeps click +
+    // Enter/Space activation and a focus ring.
+    /* @__PURE__ */ jsx7(
+      "span",
       {
-        type: "button",
-        className: "ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        role: "button",
+        tabIndex: 0,
+        "aria-label": `Remove ${option.label}`,
+        className: "ml-1 inline-flex cursor-pointer ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
         onKeyDown: (e) => {
-          if (e.key === "Enter") onRemove(option.value, e);
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onRemove(option.value, e);
+          }
         },
         onMouseDown: (e) => {
           e.preventDefault();
@@ -852,6 +914,7 @@ function FormMultiSelect(props) {
     error,
     required,
     wrapperClassName,
+    labelPlacement,
     options,
     onChange,
     onBlur,
@@ -897,6 +960,7 @@ function FormMultiSelect(props) {
       description,
       error,
       required,
+      labelPlacement,
       className: wrapperClassName,
       children: [
         /* @__PURE__ */ jsxs6(Popover2, { open, onOpenChange: handleOpenChange, children: [
@@ -1063,6 +1127,7 @@ var FormTagsInput = React7.forwardRef((props, ref) => {
     description,
     error,
     wrapperClassName,
+    labelPlacement,
     id,
     name,
     value = [],
@@ -1089,6 +1154,7 @@ var FormTagsInput = React7.forwardRef((props, ref) => {
       description,
       error,
       required,
+      labelPlacement,
       className: wrapperClassName,
       children: /* @__PURE__ */ jsxs7(
         "div",
@@ -1292,6 +1358,7 @@ var FormQuantityInput = React8.forwardRef((allProps, ref) => {
     readOnly,
     autoFocus,
     wrapperClassName,
+    labelPlacement,
     className,
     name
   } = allProps;
@@ -1361,6 +1428,7 @@ var FormQuantityInput = React8.forwardRef((allProps, ref) => {
       description,
       error: resolvedError,
       required,
+      labelPlacement,
       className: wrapperClassName,
       children: /* @__PURE__ */ jsxs8(
         InputGroup,
@@ -1465,9 +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 { isFieldRequired } from "@petrarca/sonnet-core/schema";
+import { AlertCircle as AlertCircle2 } from "lucide-react";
+import {
+  WIDTH_TOKEN_REMS
+} 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
@@ -1510,6 +1582,7 @@ function TextInputWidget({
       onChange: (event) => onChange(event.currentTarget.value),
       onBlur: () => onBlur?.(id, value),
       label,
+      labelPlacement: options?.labelPlacement,
       description,
       placeholder,
       required,
@@ -1557,6 +1630,7 @@ function TextareaWidget({
       onChange: (event) => onChange(event.currentTarget.value),
       onBlur: () => onBlur?.(id, value),
       label,
+      labelPlacement: options?.labelPlacement,
       description,
       placeholder,
       required,
@@ -1604,6 +1678,7 @@ function NumberWidget({
       onChange: (val) => onChange(val),
       onBlur: () => onBlur?.(id, value),
       label,
+      labelPlacement: options.labelPlacement,
       description,
       placeholder,
       required,
@@ -1720,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;
@@ -1735,6 +1811,7 @@ function SelectWidget(props) {
         value: normalizeMultiValue(value),
         onChange: (newValue) => onChange(newValue || []),
         label,
+        labelPlacement: widgetOptions.labelPlacement,
         description,
         placeholder,
         required,
@@ -1758,6 +1835,7 @@ function SelectWidget(props) {
       value: normalizeSingleValue(value),
       onChange: (val) => onChange(val || ""),
       label,
+      labelPlacement: widgetOptions.labelPlacement,
       description,
       placeholder,
       required,
@@ -1768,7 +1846,9 @@ function SelectWidget(props) {
       autoFocus: autofocus,
       onBlur: handleBlur,
       className: triggerClassName,
-      compact
+      compact,
+      allowCreate: creatable,
+      onCreate: (label2) => onChange(label2)
     }
   );
 }
@@ -1799,6 +1879,7 @@ function TagsInputWidget({
       value: tags,
       onChange: (newTags) => onChange(newTags),
       label,
+      labelPlacement: options?.labelPlacement,
       description,
       placeholder: placeholder ?? "Type and press Enter",
       required,
@@ -1880,11 +1961,14 @@ function resolveMinChars(options) {
 }
 function buildRestConfig(options) {
   if (!("endpoint" in options) || !options.endpoint) return null;
+  const rawExtra = options.extraParams;
+  const extraParams = rawExtra && typeof rawExtra === "object" ? rawExtra : void 0;
   return {
     endpoint: String(options.endpoint),
     valueKey: String(options.valueKey ?? "id"),
     labelKey: String(options.labelKey ?? "name"),
-    searchKey: options.searchKey ? String(options.searchKey) : void 0
+    searchKey: options.searchKey ? String(options.searchKey) : void 0,
+    extraParams
   };
 }
 function buildGraphqlConfig(options) {
@@ -1948,12 +2032,13 @@ function EntitySelectWidget({
       mode: selectMode,
       minChars: selectMinChars,
       value: typeof value === "string" ? value : null,
-      onChange: (v) => onChange(v ?? ""),
+      onChange: (v) => onChange(v ?? null),
       onBlur: () => onBlur?.(id, value),
       label: label || false,
       description,
       placeholder,
       required,
+      clearable: !required,
       disabled: disabled || readonly,
       error: firstError(rawErrors)
     }
@@ -2166,7 +2251,7 @@ function ObjectWidget({
 
 // src/widgets/ArrayWidget.tsx
 import { useCallback as useCallback5, useMemo as useMemo5 } from "react";
-import { Plus } from "lucide-react";
+import { Plus as Plus2 } from "lucide-react";
 import { Button as Button5 } from "@petrarca/sonnet-ui";
 import { applySchemaDefaults } from "@petrarca/sonnet-core/schema";
 import { FORM_ITEM_ID_FIELD, generateId } from "@petrarca/sonnet-core";
@@ -2182,53 +2267,61 @@ function DefaultArrayItemTemplate({
   canRemove,
   orderable,
   disabled,
+  fid,
   onRemove,
   onMoveUp,
   onMoveDown
 }) {
   const showControls = canRemove || orderable;
-  return /* @__PURE__ */ jsxs14("div", { className: "relative flex gap-2 rounded-md border border-border/50 bg-muted/20 p-3", children: [
-    /* @__PURE__ */ jsx22("div", { className: "flex-1 min-w-0", children }),
-    showControls && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1 pt-0.5", children: [
-      orderable && index > 0 && /* @__PURE__ */ jsx22(
-        Button4,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "compact",
-          disabled,
-          onClick: onMoveUp,
-          title: "Move up",
-          children: /* @__PURE__ */ jsx22(ChevronUp, { className: "h-3.5 w-3.5" })
-        }
-      ),
-      orderable && index < total - 1 && /* @__PURE__ */ jsx22(
-        Button4,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "compact",
-          disabled,
-          onClick: onMoveDown,
-          title: "Move down",
-          children: /* @__PURE__ */ jsx22(ChevronDown3, { className: "h-3.5 w-3.5" })
-        }
-      ),
-      canRemove && /* @__PURE__ */ jsx22(
-        Button4,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "compact",
-          disabled,
-          onClick: onRemove,
-          title: "Remove item",
-          className: "text-muted-foreground hover:text-destructive",
-          children: /* @__PURE__ */ jsx22(Trash2, { className: "h-3.5 w-3.5" })
-        }
-      )
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs14(
+    "div",
+    {
+      "data-fid": fid,
+      className: "relative flex gap-2 rounded-md border border-border/50 bg-muted/20 p-3",
+      children: [
+        /* @__PURE__ */ jsx22("div", { className: "flex-1 min-w-0", children }),
+        showControls && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1 pt-0.5", children: [
+          orderable && index > 0 && /* @__PURE__ */ jsx22(
+            Button4,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "compact",
+              disabled,
+              onClick: onMoveUp,
+              title: "Move up",
+              children: /* @__PURE__ */ jsx22(ChevronUp, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          orderable && index < total - 1 && /* @__PURE__ */ jsx22(
+            Button4,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "compact",
+              disabled,
+              onClick: onMoveDown,
+              title: "Move down",
+              children: /* @__PURE__ */ jsx22(ChevronDown3, { className: "h-3.5 w-3.5" })
+            }
+          ),
+          canRemove && /* @__PURE__ */ jsx22(
+            Button4,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "compact",
+              disabled,
+              onClick: onRemove,
+              title: "Remove item",
+              className: "text-muted-foreground hover:text-destructive",
+              children: /* @__PURE__ */ jsx22(Trash2, { className: "h-3.5 w-3.5" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
 }
 
 // src/templates/gridUtils.ts
@@ -2494,6 +2587,7 @@ function ArrayWidgetInner({
         disabled,
         layout,
         fieldCount,
+        fid: item[FORM_ITEM_ID_FIELD],
         onRemove: () => onRemove(index),
         onMoveUp: index > 0 ? () => onMove(index, index - 1) : void 0,
         onMoveDown: index < items.length - 1 ? () => onMove(index, index + 1) : void 0,
@@ -2528,7 +2622,7 @@ function ArrayWidgetInner({
         disabled,
         className: "gap-1.5",
         children: [
-          /* @__PURE__ */ jsx24(Plus, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx24(Plus2, { className: "h-3.5 w-3.5" }),
           display.addLabel
         ]
       }
@@ -2542,6 +2636,13 @@ import { jsx as jsx25 } from "react/jsx-runtime";
 function isUnitOption(u) {
   return typeof u === "object" && u !== null && typeof u.value === "string" && typeof u.label === "string";
 }
+function parseQuantityOptions(options) {
+  const units = Array.isArray(options.units) ? options.units.filter(isUnitOption) : [];
+  const precision = typeof options.precision === "number" ? options.precision : void 0;
+  const step = typeof options.step === "number" ? options.step : void 0;
+  const unitPosition = options.unitPosition === "prefix" || options.unitPosition === "suffix" ? options.unitPosition : void 0;
+  return { units, precision, step, unitPosition };
+}
 function QuantityWidget({
   id,
   name,
@@ -2560,10 +2661,12 @@ function QuantityWidget({
   options = {}
 }) {
   const error = firstError(rawErrors);
-  const units = Array.isArray(options.units) ? options.units.filter(isUnitOption) : [];
-  const precision = typeof options.precision === "number" ? options.precision : void 0;
-  const step = typeof options.step === "number" ? options.step : void 0;
-  const unitPositionOpt = options.unitPosition === "prefix" || options.unitPosition === "suffix" ? options.unitPosition : void 0;
+  const {
+    units,
+    precision,
+    step,
+    unitPosition: unitPositionOpt
+  } = parseQuantityOptions(options);
   const quantityValue = value != null && typeof value === "object" && !Array.isArray(value) ? value : void 0;
   const valueRef = useRef4(value);
   valueRef.current = value;
@@ -2585,6 +2688,7 @@ function QuantityWidget({
       min: propertySchema.minimum,
       max: propertySchema.maximum,
       label,
+      labelPlacement: options?.labelPlacement,
       description,
       error,
       placeholder,
@@ -2596,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";
@@ -2610,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"
@@ -2622,6 +3029,9 @@ var DEFAULT_WIDGET_MAP = {
   },
   boolean: {
     default: "CheckboxWidget"
+  },
+  null: {
+    default: "DisplayWidget"
   }
 };
 function resolveWidgetByName(widgetName, propertySchema, registry) {
@@ -2671,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)
@@ -2714,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,
@@ -2725,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,
@@ -2741,6 +3162,7 @@ function HorizontalArrayItemTemplate({
   disabled,
   layout,
   fieldCount,
+  fid,
   onRemove,
   onMoveUp,
   onMoveDown
@@ -2754,9 +3176,10 @@ function HorizontalArrayItemTemplate({
   );
   const gap = resolvedLayout.gap ?? 8;
   const alignItems = resolvedLayout.compact ? "center" : "start";
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs19(
     "div",
     {
+      "data-fid": fid,
       style: {
         display: "grid",
         gridTemplateColumns: template,
@@ -2765,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",
@@ -2776,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",
@@ -2789,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",
@@ -2803,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" })
           }
         )
       ]
@@ -2811,21 +3234,132 @@ 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";
 import {
   getFieldTitle,
   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"] || {};
@@ -2837,6 +3371,29 @@ function resolveEffectiveLabel(label, uiTitle, globalLabelOption) {
   if (uiTitle === false) return "";
   return label;
 }
+var FIELD_WIDTH_CLASS = {
+  sm: "w-32",
+  md: "w-48",
+  lg: "w-64",
+  full: "w-full"
+};
+function applyFieldWidth(widget, uiSchema, mergedOptions) {
+  const candidate = uiSchema?.["x-ui-width"] ?? mergedOptions.width;
+  if (candidate && !(candidate in FIELD_WIDTH_CLASS)) {
+    warnLog(
+      `[FormFieldRenderer] Unknown x-ui-width value: "${candidate}". Falling back to "full".`
+    );
+  }
+  const width = candidate && candidate in FIELD_WIDTH_CLASS ? candidate : "full";
+  if (width === "full") return widget;
+  return /* @__PURE__ */ jsx36("div", { className: FIELD_WIDTH_CLASS[width], children: widget });
+}
+function resolvePresentationText(property, uiSchema) {
+  return {
+    description: uiSchema?.["x-ui-description"] ?? getFieldHelpText(property),
+    placeholder: uiSchema?.["x-ui-placeholder"] ?? getFieldPlaceholder(property)
+  };
+}
 function resolveFieldFlags(fieldOptions, globalOptions, disabled, readOnly) {
   return {
     disabled: fieldOptions.disabled ?? globalOptions.disabled ?? disabled,
@@ -2856,11 +3413,14 @@ function FormFieldRenderer({
   uiSchema,
   registry,
   globalOptions = {},
-  formData
+  formData,
+  idPrefix = "field"
 }) {
   const label = getFieldTitle(fieldName, property);
-  const description = uiSchema?.["x-ui-description"] ?? getFieldHelpText(property);
-  const placeholder = uiSchema?.["x-ui-placeholder"] ?? getFieldPlaceholder(property);
+  const { description, placeholder } = resolvePresentationText(
+    property,
+    uiSchema
+  );
   const Widget = resolveWidget(property, uiSchema, registry);
   const mergedOptions = mergeFieldOptions(globalOptions, property, uiSchema);
   if (mergedOptions.hidden) return null;
@@ -2876,10 +3436,10 @@ function FormFieldRenderer({
     uiSchema?.["x-ui-title"],
     globalOptions.label
   );
-  return /* @__PURE__ */ jsx27(
+  const widget = /* @__PURE__ */ jsx36(
     Widget,
     {
-      id: `field-${fieldName}`,
+      id: `${idPrefix}-${fieldName}`,
       name: fieldName,
       value,
       onChange,
@@ -2898,10 +3458,11 @@ function FormFieldRenderer({
       formData
     }
   );
+  return applyFieldWidth(widget, uiSchema, mergedOptions);
 }
 
 // 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,
@@ -2968,14 +3529,19 @@ function useFormEngine({
   readOnly = false,
   showActions = false,
   deferChanges = false,
-  deferStateUpdates = false
+  deferStateUpdates = 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);
@@ -2984,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) {
@@ -3050,8 +3613,6 @@ function useFormEngine({
         setOriginalDataInitialized(true);
       }
     }
-    const validation = validateFormData(resolvedSchema, newData);
-    setIsValid(validation.isValid);
   }, [
     data,
     refResolvedSchema,
@@ -3060,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;
       }
@@ -3084,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,
@@ -3097,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);
@@ -3113,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,
@@ -3154,11 +3707,11 @@ function useFormEngine({
     ]
   );
   const handleSave = useCallback7(() => {
-    if (!hasChanges) return;
+    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])) {
@@ -3171,6 +3724,7 @@ function useFormEngine({
     }
   }, [
     hasChanges,
+    allowPristineSave,
     resolvedSchema,
     formData,
     originalData,
@@ -3191,6 +3745,7 @@ function useFormEngine({
     orderedProperties,
     hasChanges,
     isValid,
+    fieldErrors,
     handleFieldChange,
     handleFieldBlur,
     handleSave,
@@ -3199,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)) {
@@ -3232,7 +3787,8 @@ function resolveFlagDefaults(props) {
     deferStateUpdates: props.deferStateUpdates ?? false,
     showCancel: props.showCancel ?? true,
     showExtraProperties: props.showExtraProperties ?? true,
-    displayContents: props.displayContents ?? false
+    displayContents: props.displayContents ?? false,
+    allowPristineSave: props.allowPristineSave ?? false
   };
 }
 function resolveValueDefaults(props) {
@@ -3265,54 +3821,147 @@ 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);
     }
   }
   return map;
 }
+var COLUMN_TRACK = WIDTH_TOKEN_REMS;
+function resolveGridColumns(row, fieldCount) {
+  if (row.columns) return row.columns;
+  if (row.widths && row.widths.length > 0) {
+    return Array.from(
+      { length: fieldCount },
+      (_, i) => COLUMN_TRACK[row.widths?.[i] ?? "full"]
+    ).join(" ");
+  }
+  return `repeat(${fieldCount}, 1fr)`;
+}
+function wrapInGroup(group, key, content) {
+  if (!group) return content;
+  return /* @__PURE__ */ jsxs23(
+    "fieldset",
+    {
+      className: "rounded-md border border-border/60 px-3 pb-3 pt-1",
+      children: [
+        /* @__PURE__ */ jsx37("legend", { className: "px-1 text-sm font-medium text-muted-foreground", children: group }),
+        content
+      ]
+    },
+    `group:${key}`
+  );
+}
 function buildRowElement(row, fieldMap, defaultRowGap) {
   const rowFields = row.fields.map((name) => fieldMap.get(name)).filter((el) => el != null);
   if (rowFields.length === 0) return null;
-  const gridColumns = row.columns ?? `repeat(${rowFields.length}, 1fr)`;
   const rowGap = row.gap ?? defaultRowGap;
+  const rowKey = row.fields.join(",");
+  const style = row.arrange === "flow" ? {
+    display: "flex",
+    flexWrap: "wrap",
+    alignItems: "center",
+    gap: `${rowGap}px`
+  } : {
+    display: "grid",
+    gridTemplateColumns: resolveGridColumns(row, rowFields.length),
+    gap: `${rowGap}px`
+  };
+  const inner = /* @__PURE__ */ jsx37("div", { style, children: rowFields }, `row:${rowKey}`);
   return {
-    element: /* @__PURE__ */ jsx28(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gridTemplateColumns: gridColumns,
-          gap: `${rowGap}px`
-        },
-        children: rowFields
-      },
-      `row:${row.fields.join(",")}`
-    ),
+    element: wrapInGroup(row.group, rowKey, inner),
     placed: row.fields
   };
 }
 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,
@@ -3328,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: 24, 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,
@@ -3362,7 +4013,8 @@ function JsonSchemaFormRenderer(props) {
     onUpdate,
     onCancel,
     templates,
-    leadingActions
+    leadingActions,
+    idPrefix = "field"
   } = props;
   const {
     disabled,
@@ -3372,7 +4024,8 @@ function JsonSchemaFormRenderer(props) {
     deferStateUpdates,
     showCancel,
     showExtraProperties,
-    displayContents
+    displayContents,
+    allowPristineSave
   } = resolveFlagDefaults(props);
   const { saveLabel, cancelLabel, widgets, uiSchema } = resolveValueDefaults(props);
   const { wrappedOnChange, wrappedOnBlur, wrappedOnUpdate } = useWrappedCallbacks(onChange, onBlur, onUpdate);
@@ -3383,6 +4036,7 @@ function JsonSchemaFormRenderer(props) {
     orderedProperties,
     hasChanges,
     isValid,
+    fieldErrors,
     handleFieldChange,
     handleFieldBlur,
     handleSave,
@@ -3399,15 +4053,24 @@ function JsonSchemaFormRenderer(props) {
     readOnly,
     showActions,
     deferChanges,
-    deferStateUpdates
+    deferStateUpdates,
+    allowPristineSave,
+    refResolver: props.refResolver
   });
-  const globalOptions = uiSchema["x-ui-globalOptions"] || {};
-  const resolvedTemplates = useMemo7(
+  const layoutLabelPlacement = uiSchema["x-ui-layout"]?.labelPlacement;
+  const globalOptions = useMemo8(
+    () => ({
+      ...layoutLabelPlacement ? { labelPlacement: layoutLabelPlacement } : {},
+      ...uiSchema["x-ui-globalOptions"] || {}
+    }),
+    [layoutLabelPlacement, uiSchema]
+  );
+  const resolvedTemplates = useMemo8(
     () => ({ ...DEFAULT_TEMPLATES, ...templates }),
     [templates]
   );
   const nestedRenderer = useCallback8(
-    (props2) => /* @__PURE__ */ jsx28(
+    (props2) => /* @__PURE__ */ jsx37(
       JsonSchemaFormRenderer,
       {
         ...props2,
@@ -3418,38 +4081,94 @@ function JsonSchemaFormRenderer(props) {
     ),
     [resolvedTemplates]
   );
-  const contextValue = useMemo7(
+  const contextValue = useMemo8(
     () => ({ renderer: nestedRenderer, templates: resolvedTemplates }),
     [nestedRenderer, resolvedTemplates]
   );
   const needsBlurHandler = deferStateUpdates || !!onBlur;
-  const fields = 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),
+  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,
+      resolvedSchema,
       disabled,
       readOnly,
       schema,
-      uiSchema: uiSchema[fieldName],
-      registry: widgets,
+      uiSchema,
+      widgets,
       globalOptions,
-      formData: displayData
-    },
-    fieldName
-  ));
+      idPrefix,
+      needsBlurHandler,
+      handleFieldChange,
+      handleFieldBlur
+    ]
+  );
   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,
@@ -3460,19 +4179,20 @@ function JsonSchemaFormRenderer(props) {
       handleSave,
       handleCancel,
       disabled,
-      hasChanges,
+      hasChanges: hasChanges || allowPristineSave,
       isValid,
       saveLabel,
       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
@@ -3482,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;
@@ -3500,6 +4220,9 @@ export {
   DEFAULT_TEMPLATES,
   DEFAULT_WIDGETS,
   DEFAULT_WIDGET_MAP,
+  DateTimeWidget,
+  DateWidget,
+  DisplayWidget,
   EntitySelectWidget,
   ExtraPropertiesCard_default as ExtraPropertiesCard,
   FormActions,
@@ -3513,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,