@petrarca/sonnet-forms 0.4.1 → 0.5.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,
@@ -1467,6 +1535,9 @@ var ExtraPropertiesCard_default = ExtraPropertiesCard;
 // src/JsonSchemaFormRenderer.tsx
 import React11, { useCallback as useCallback8, useMemo as useMemo7 } from "react";
 import { SimpleStack } from "@petrarca/sonnet-ui";
+import {
+  WIDTH_TOKEN_REMS
+} from "@petrarca/sonnet-core/schema";
 import { isFieldRequired } from "@petrarca/sonnet-core/schema";
 import { FORM_ITEM_ID_FIELD as FORM_ITEM_ID_FIELD2 } from "@petrarca/sonnet-core";
 
@@ -1510,6 +1581,7 @@ function TextInputWidget({
       onChange: (event) => onChange(event.currentTarget.value),
       onBlur: () => onBlur?.(id, value),
       label,
+      labelPlacement: options?.labelPlacement,
       description,
       placeholder,
       required,
@@ -1557,6 +1629,7 @@ function TextareaWidget({
       onChange: (event) => onChange(event.currentTarget.value),
       onBlur: () => onBlur?.(id, value),
       label,
+      labelPlacement: options?.labelPlacement,
       description,
       placeholder,
       required,
@@ -1604,6 +1677,7 @@ function NumberWidget({
       onChange: (val) => onChange(val),
       onBlur: () => onBlur?.(id, value),
       label,
+      labelPlacement: options.labelPlacement,
       description,
       placeholder,
       required,
@@ -1735,6 +1809,7 @@ function SelectWidget(props) {
         value: normalizeMultiValue(value),
         onChange: (newValue) => onChange(newValue || []),
         label,
+        labelPlacement: widgetOptions.labelPlacement,
         description,
         placeholder,
         required,
@@ -1758,6 +1833,7 @@ function SelectWidget(props) {
       value: normalizeSingleValue(value),
       onChange: (val) => onChange(val || ""),
       label,
+      labelPlacement: widgetOptions.labelPlacement,
       description,
       placeholder,
       required,
@@ -1799,6 +1875,7 @@ function TagsInputWidget({
       value: tags,
       onChange: (newTags) => onChange(newTags),
       label,
+      labelPlacement: options?.labelPlacement,
       description,
       placeholder: placeholder ?? "Type and press Enter",
       required,
@@ -1880,11 +1957,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 +2028,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 +2247,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 +2263,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 +2583,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 +2618,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 +2632,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 +2657,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 +2684,7 @@ function QuantityWidget({
       min: propertySchema.minimum,
       max: propertySchema.maximum,
       label,
+      labelPlacement: options?.labelPlacement,
       description,
       error,
       placeholder,
@@ -2741,6 +2841,7 @@ function HorizontalArrayItemTemplate({
   disabled,
   layout,
   fieldCount,
+  fid,
   onRemove,
   onMoveUp,
   onMoveDown
@@ -2757,6 +2858,7 @@ function HorizontalArrayItemTemplate({
   return /* @__PURE__ */ jsxs17(
     "div",
     {
+      "data-fid": fid,
       style: {
         display: "grid",
         gridTemplateColumns: template,
@@ -2820,6 +2922,7 @@ var DEFAULT_TEMPLATES = {
 };
 
 // src/FormFieldRenderer.tsx
+import { warnLog } from "@petrarca/sonnet-core";
 import {
   getFieldTitle,
   getFieldHelpText,
@@ -2837,6 +2940,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__ */ jsx27("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 +2982,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 +3005,10 @@ function FormFieldRenderer({
     uiSchema?.["x-ui-title"],
     globalOptions.label
   );
-  return /* @__PURE__ */ jsx27(
+  const widget = /* @__PURE__ */ jsx27(
     Widget,
     {
-      id: `field-${fieldName}`,
+      id: `${idPrefix}-${fieldName}`,
       name: fieldName,
       value,
       onChange,
@@ -2898,6 +3027,7 @@ function FormFieldRenderer({
       formData
     }
   );
+  return applyFieldWidth(widget, uiSchema, mergedOptions);
 }
 
 // src/hooks/useFormEngine.ts
@@ -2968,7 +3098,8 @@ function useFormEngine({
   readOnly = false,
   showActions = false,
   deferChanges = false,
-  deferStateUpdates = false
+  deferStateUpdates = false,
+  allowPristineSave = false
 }) {
   const refResolvedSchema = useMemo6(() => resolveRefs(schema), [schema]);
   const [originalData, setOriginalData] = useState7(
@@ -3154,7 +3285,7 @@ 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);
@@ -3171,6 +3302,7 @@ function useFormEngine({
     }
   }, [
     hasChanges,
+    allowPristineSave,
     resolvedSchema,
     formData,
     originalData,
@@ -3232,7 +3364,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) {
@@ -3271,24 +3404,49 @@ function buildFieldMap(fields) {
   }
   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__ */ jsxs18(
+    "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 }),
+        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__ */ jsx28("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
   };
 }
@@ -3333,7 +3491,7 @@ function FormContainer({
   if (displayContents) {
     return /* @__PURE__ */ jsx28("div", { style: { display: "contents" }, children });
   }
-  return /* @__PURE__ */ jsxs18(SimpleStack, { gap: 24, children: [
+  return /* @__PURE__ */ jsxs18(SimpleStack, { gap: "md", children: [
     children,
     showExtraProperties && /* @__PURE__ */ jsx28(ExtraPropertiesCard_default, { properties: formData, schema: resolvedSchema }),
     showActions && /* @__PURE__ */ jsx28(
@@ -3362,7 +3520,8 @@ function JsonSchemaFormRenderer(props) {
     onUpdate,
     onCancel,
     templates,
-    leadingActions
+    leadingActions,
+    idPrefix = "field"
   } = props;
   const {
     disabled,
@@ -3372,7 +3531,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);
@@ -3399,9 +3559,17 @@ function JsonSchemaFormRenderer(props) {
     readOnly,
     showActions,
     deferChanges,
-    deferStateUpdates
+    deferStateUpdates,
+    allowPristineSave
   });
-  const globalOptions = uiSchema["x-ui-globalOptions"] || {};
+  const layoutLabelPlacement = uiSchema["x-ui-layout"]?.labelPlacement;
+  const globalOptions = useMemo7(
+    () => ({
+      ...layoutLabelPlacement ? { labelPlacement: layoutLabelPlacement } : {},
+      ...uiSchema["x-ui-globalOptions"] || {}
+    }),
+    [layoutLabelPlacement, uiSchema]
+  );
   const resolvedTemplates = useMemo7(
     () => ({ ...DEFAULT_TEMPLATES, ...templates }),
     [templates]
@@ -3423,25 +3591,43 @@ function JsonSchemaFormRenderer(props) {
     [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 = 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
+    )),
+    [
+      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 defaultRowGap = layoutConfig?.gap ?? 24;
@@ -3460,7 +3646,7 @@ function JsonSchemaFormRenderer(props) {
       handleSave,
       handleCancel,
       disabled,
-      hasChanges,
+      hasChanges: hasChanges || allowPristineSave,
       isValid,
       saveLabel,
       cancelLabel,