@petrarca/sonnet-forms 0.1.0

package/dist/index.js

@@ -0,0 +1,3593 @@
+// src/FormFieldWrapper.tsx
+import { cn } from "@petrarca/sonnet-core";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FormFieldWrapper({
+  inputId,
+  label,
+  description,
+  error,
+  required,
+  compact,
+  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
+      }
+    ),
+    children,
+    showChrome && error && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: `${inputId}-error`,
+        className: "text-sm font-medium text-destructive",
+        children: error
+      }
+    )
+  ] });
+}
+
+// src/formFieldUtils.ts
+function getAriaDescribedBy(inputId, error, description) {
+  if (error) return `${inputId}-error`;
+  if (description) return `${inputId}-description`;
+  return void 0;
+}
+function getAriaDescribedByCompact(inputId, error, description, compact) {
+  if (compact) return void 0;
+  return getAriaDescribedBy(inputId, error, description);
+}
+function getCompactAriaLabel(label, compact) {
+  if (compact && label) return String(label);
+  return void 0;
+}
+function getCompactTitle(error, compact) {
+  if (compact && error) return error;
+  return void 0;
+}
+function resolveFieldLabel(label) {
+  if (label === false) return void 0;
+  return label ?? void 0;
+}
+
+// src/FormInput.tsx
+import React, { useId } from "react";
+import { Input } from "@petrarca/sonnet-ui";
+import { cn as cn2 } from "@petrarca/sonnet-core";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var FormInput = React.forwardRef(
+  ({
+    label,
+    description,
+    error,
+    required,
+    wrapperClassName,
+    className,
+    id,
+    rightSection,
+    rightSectionWidth,
+    compact,
+    ...props
+  }, ref) => {
+    const generatedId = useId();
+    const inputId = id ?? generatedId;
+    const paddingStyle = rightSectionWidth ? { paddingRight: `${rightSectionWidth}px` } : void 0;
+    return /* @__PURE__ */ jsx2(
+      FormFieldWrapper,
+      {
+        inputId,
+        label: label === false ? void 0 : label,
+        description,
+        error,
+        required,
+        compact,
+        className: wrapperClassName,
+        children: /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+          /* @__PURE__ */ jsx2(
+            Input,
+            {
+              id: inputId,
+              ref,
+              required,
+              style: paddingStyle,
+              className: cn2(
+                error && "border-destructive focus-visible:ring-destructive",
+                className
+              ),
+              "aria-invalid": error ? "true" : "false",
+              "aria-describedby": getAriaDescribedByCompact(
+                inputId,
+                error,
+                description,
+                compact
+              ),
+              "aria-label": getCompactAriaLabel(label, compact),
+              title: getCompactTitle(error, compact),
+              ...props
+            }
+          ),
+          rightSection && /* @__PURE__ */ jsx2("div", { className: "absolute top-1/2 -translate-y-1/2 right-2 flex items-center gap-1", children: rightSection })
+        ] })
+      }
+    );
+  }
+);
+FormInput.displayName = "FormInput";
+
+// src/FormTextarea.tsx
+import React2, { useEffect, useId as useId2, useRef } from "react";
+import { Textarea } from "@petrarca/sonnet-ui";
+import { cn as cn3 } from "@petrarca/sonnet-core";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function useMergedRef(forwardedRef, internalRef) {
+  return (element) => {
+    internalRef.current = element;
+    if (typeof forwardedRef === "function") {
+      forwardedRef(element);
+    } else if (forwardedRef) {
+      forwardedRef.current = element;
+    }
+  };
+}
+function useAutoResize(ref, value, autosize, minRows) {
+  useEffect(() => {
+    if (!autosize || !ref.current) return;
+    const textarea = ref.current;
+    textarea.style.height = "auto";
+    const newHeight = Math.max(textarea.scrollHeight, minRows * 24);
+    textarea.style.height = `${newHeight}px`;
+  }, [value, autosize, minRows, ref]);
+}
+function textareaClassName(error, autosize, className) {
+  return cn3(
+    error && "border-destructive focus-visible:ring-destructive",
+    autosize && "resize-none overflow-hidden",
+    "h-full",
+    className
+  );
+}
+var FormTextarea = React2.forwardRef((allProps, ref) => {
+  const {
+    label,
+    description,
+    error,
+    required,
+    wrapperClassName,
+    className,
+    id,
+    value,
+    onChange,
+    rightSection,
+    rightSectionWidth,
+    ...props
+  } = allProps;
+  const autosize = allProps.autosize ?? false;
+  const minRows = allProps.minRows ?? 3;
+  const generatedId = useId2();
+  const textareaId = id ?? generatedId;
+  const internalRef = useRef(null);
+  const setRefs = useMergedRef(ref, internalRef);
+  useAutoResize(internalRef, value, autosize, minRows);
+  const paddingStyle = rightSectionWidth ? { paddingRight: `${rightSectionWidth}px` } : void 0;
+  const effectiveRows = autosize ? minRows : props.rows;
+  const resolvedLabel = label === false ? void 0 : label;
+  return /* @__PURE__ */ jsx3(
+    FormFieldWrapper,
+    {
+      inputId: textareaId,
+      label: resolvedLabel,
+      description,
+      error,
+      required,
+      className: cn3("flex flex-col", wrapperClassName),
+      children: /* @__PURE__ */ jsxs3("div", { className: "relative flex-1 min-h-0", children: [
+        /* @__PURE__ */ jsx3(
+          Textarea,
+          {
+            id: textareaId,
+            ref: setRefs,
+            value,
+            onChange,
+            required,
+            rows: effectiveRows,
+            className: textareaClassName(error, autosize, className),
+            style: paddingStyle,
+            "aria-invalid": error ? "true" : "false",
+            "aria-describedby": getAriaDescribedBy(textareaId, error, description),
+            ...props
+          }
+        ),
+        rightSection && /* @__PURE__ */ jsx3("div", { className: "absolute top-2 right-2 flex items-start gap-1", children: rightSection })
+      ] })
+    }
+  );
+});
+FormTextarea.displayName = "FormTextarea";
+
+// src/FormNumberInput.tsx
+import React3, { useId as useId3 } from "react";
+import { Input as Input2 } from "@petrarca/sonnet-ui";
+import { cn as cn4 } from "@petrarca/sonnet-core";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var FormNumberInput = React3.forwardRef(
+  ({
+    value,
+    label,
+    description,
+    error,
+    placeholder,
+    required,
+    disabled,
+    readOnly,
+    min,
+    max,
+    step,
+    allowDecimal = true,
+    onChange,
+    onBlur,
+    autoFocus,
+    wrapperClassName,
+    className,
+    id,
+    name
+  }, ref) => {
+    const generatedId = useId3();
+    const inputId = id ?? generatedId;
+    const handleChange = (e) => {
+      if (!onChange) return;
+      const val = e.target.value;
+      if (val === "" || val === void 0) {
+        onChange(void 0);
+      } else {
+        const numVal = parseFloat(val);
+        if (!isNaN(numVal)) onChange(numVal);
+      }
+    };
+    const displayValue = value !== void 0 && value !== null ? String(value) : "";
+    return /* @__PURE__ */ jsx4(
+      FormFieldWrapper,
+      {
+        inputId,
+        label,
+        description,
+        error,
+        required,
+        className: wrapperClassName,
+        children: /* @__PURE__ */ jsx4(
+          Input2,
+          {
+            id: inputId,
+            name,
+            ref,
+            type: "number",
+            inputMode: "numeric",
+            value: displayValue,
+            onChange: handleChange,
+            onBlur,
+            placeholder,
+            disabled,
+            readOnly,
+            autoFocus,
+            min,
+            max,
+            step: step ?? (allowDecimal ? "any" : 1),
+            className: cn4(error && "border-destructive", className),
+            "aria-invalid": error ? "true" : "false",
+            "aria-describedby": getAriaDescribedBy(inputId, error, description),
+            "aria-required": required
+          }
+        )
+      }
+    );
+  }
+);
+FormNumberInput.displayName = "FormNumberInput";
+
+// src/FormCheckbox.tsx
+import React4, { useId as useId4 } from "react";
+import { Checkbox } from "@petrarca/sonnet-ui";
+import { cn as cn5 } from "@petrarca/sonnet-core";
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function CheckboxLabel({
+  htmlFor,
+  label,
+  required,
+  disabled,
+  compact
+}) {
+  if (compact || !label) return null;
+  return /* @__PURE__ */ jsxs4(
+    "label",
+    {
+      htmlFor,
+      className: cn5(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        disabled && "opacity-70 cursor-not-allowed"
+      ),
+      children: [
+        label,
+        required && /* @__PURE__ */ jsx5("span", { className: "text-destructive ml-1", children: "*" })
+      ]
+    }
+  );
+}
+function CheckboxChrome({
+  inputId,
+  description,
+  error,
+  compact
+}) {
+  if (compact) return null;
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    description && /* @__PURE__ */ jsx5(
+      "p",
+      {
+        id: `${inputId}-description`,
+        className: "text-sm text-muted-foreground ml-6",
+        children: description
+      }
+    ),
+    error && /* @__PURE__ */ jsx5("p", { id: `${inputId}-error`, className: "text-sm text-destructive ml-6", children: error })
+  ] });
+}
+var FormCheckbox = React4.forwardRef(
+  ({
+    checked,
+    label,
+    description,
+    error,
+    required,
+    disabled,
+    readOnly,
+    onChange,
+    onBlur,
+    autoFocus,
+    wrapperClassName,
+    className,
+    id,
+    compact
+  }, ref) => {
+    const generatedId = useId4();
+    const checkboxId = id ?? generatedId;
+    const handleCheckedChange = (newChecked) => {
+      if (!readOnly && onChange) {
+        onChange(newChecked);
+      }
+    };
+    return /* @__PURE__ */ jsxs4("div", { className: cn5(!compact && "space-y-2", wrapperClassName), children: [
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-start space-x-2", children: [
+        /* @__PURE__ */ jsx5(
+          Checkbox,
+          {
+            id: checkboxId,
+            ref,
+            checked,
+            onCheckedChange: handleCheckedChange,
+            onBlur,
+            disabled: disabled || readOnly,
+            autoFocus,
+            className: cn5(error && "border-destructive", className),
+            "aria-invalid": error ? "true" : "false",
+            "aria-describedby": getAriaDescribedByCompact(
+              checkboxId,
+              error,
+              description,
+              compact
+            ),
+            "aria-label": getCompactAriaLabel(label, compact),
+            title: getCompactTitle(error, compact)
+          }
+        ),
+        /* @__PURE__ */ jsx5(
+          CheckboxLabel,
+          {
+            htmlFor: checkboxId,
+            label,
+            required,
+            disabled,
+            compact
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx5(
+        CheckboxChrome,
+        {
+          inputId: checkboxId,
+          description,
+          error,
+          compact
+        }
+      )
+    ] });
+  }
+);
+FormCheckbox.displayName = "FormCheckbox";
+
+// src/FormSelect.tsx
+import * as React5 from "react";
+import { Check, ChevronsUpDown, X } from "lucide-react";
+import { cn as cn6 } from "@petrarca/sonnet-core";
+import { Button } from "@petrarca/sonnet-ui";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList
+} from "@petrarca/sonnet-ui";
+import { Popover, PopoverContent, PopoverTrigger } from "@petrarca/sonnet-ui";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function TriggerButton({
+  selectId,
+  open,
+  selectedOption,
+  placeholder,
+  error,
+  compact,
+  label,
+  description,
+  clearable,
+  value,
+  isDisabled,
+  autoFocus,
+  className,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs5(
+    Button,
+    {
+      id: selectId,
+      variant: "outline",
+      role: "combobox",
+      "aria-expanded": open,
+      "aria-invalid": error ? "true" : "false",
+      "aria-describedby": getAriaDescribedByCompact(
+        selectId,
+        error,
+        description,
+        compact
+      ),
+      "aria-label": getCompactAriaLabel(label, compact),
+      title: getCompactTitle(error, compact),
+      className: cn6(
+        "w-full justify-between",
+        !selectedOption && "text-muted-foreground",
+        error && "border-destructive",
+        className
+      ),
+      disabled: isDisabled,
+      autoFocus,
+      children: [
+        /* @__PURE__ */ jsx6("span", { className: "truncate", children: selectedOption ? selectedOption.label : placeholder }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1", children: [
+          clearable && value && !isDisabled && /* @__PURE__ */ jsx6(
+            X,
+            {
+              className: "h-4 w-4 opacity-50 hover:opacity-100",
+              onClick: onClear
+            }
+          ),
+          /* @__PURE__ */ jsx6(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+        ] })
+      ]
+    }
+  );
+}
+function SelectDropdown({
+  searchPlaceholder,
+  searchQuery,
+  onSearchChange,
+  loading,
+  emptyMessage,
+  options,
+  value,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs5(Command, { shouldFilter: false, children: [
+    /* @__PURE__ */ jsx6(
+      CommandInput,
+      {
+        placeholder: searchPlaceholder,
+        value: searchQuery,
+        onValueChange: onSearchChange
+      }
+    ),
+    /* @__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
+      )) })
+    ] })
+  ] });
+}
+function useSelectState(value, onChange, onBlur) {
+  const [open, setOpen] = React5.useState(false);
+  const [searchQuery, setSearchQuery] = React5.useState("");
+  const handleSelect = (selectedValue) => {
+    onChange?.(selectedValue === value ? null : selectedValue);
+    setOpen(false);
+    setSearchQuery("");
+  };
+  const handleClear = (e) => {
+    e.stopPropagation();
+    onChange?.(null);
+  };
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+    if (newOpen) return;
+    setSearchQuery("");
+    onBlur?.();
+  };
+  return {
+    open,
+    searchQuery,
+    setSearchQuery,
+    handleSelect,
+    handleClear,
+    handleOpenChange
+  };
+}
+function resolveSelectDefaults(props) {
+  return {
+    placeholder: props.placeholder ?? "Select...",
+    searchPlaceholder: props.searchPlaceholder ?? "Search...",
+    emptyMessage: props.emptyMessage ?? "No results found",
+    clearable: props.clearable ?? true,
+    disabled: props.disabled ?? false,
+    readOnly: props.readOnly ?? false,
+    loading: props.loading ?? false
+  };
+}
+function FormSelect(props) {
+  const {
+    label,
+    description,
+    error,
+    required,
+    wrapperClassName,
+    compact,
+    options,
+    value,
+    onChange,
+    onBlur,
+    className,
+    id,
+    autoFocus
+  } = props;
+  const {
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    clearable,
+    disabled,
+    readOnly,
+    loading
+  } = resolveSelectDefaults(props);
+  const generatedId = React5.useId();
+  const selectId = id ?? generatedId;
+  const {
+    open,
+    searchQuery,
+    setSearchQuery,
+    handleSelect,
+    handleClear,
+    handleOpenChange
+  } = useSelectState(value, onChange, onBlur);
+  const selectedOption = options.find((opt) => opt.value === value);
+  const isDisabled = disabled || readOnly || loading;
+  return /* @__PURE__ */ jsx6(
+    FormFieldWrapper,
+    {
+      inputId: selectId,
+      label,
+      description,
+      error,
+      required,
+      compact,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsxs5(Popover, { open, onOpenChange: handleOpenChange, children: [
+        /* @__PURE__ */ jsx6(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx6(
+          TriggerButton,
+          {
+            selectId,
+            open,
+            selectedOption,
+            placeholder,
+            error,
+            compact,
+            label,
+            description,
+            clearable,
+            value,
+            isDisabled,
+            autoFocus,
+            className,
+            onClear: handleClear
+          }
+        ) }),
+        /* @__PURE__ */ jsx6(
+          PopoverContent,
+          {
+            className: "w-[--radix-popover-trigger-width] p-0",
+            align: "start",
+            children: /* @__PURE__ */ jsx6(
+              SelectDropdown,
+              {
+                searchPlaceholder,
+                searchQuery,
+                onSearchChange: setSearchQuery,
+                loading,
+                emptyMessage,
+                options,
+                value,
+                onSelect: handleSelect
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/FormMultiSelect.tsx
+import * as React6 from "react";
+import { Check as Check2, ChevronsUpDown as ChevronsUpDown2, X as X2 } from "lucide-react";
+import { cn as cn7 } from "@petrarca/sonnet-core";
+import { Button as Button2 } from "@petrarca/sonnet-ui";
+import { Badge } from "@petrarca/sonnet-ui";
+import {
+  Command as Command2,
+  CommandEmpty as CommandEmpty2,
+  CommandGroup as CommandGroup2,
+  CommandInput as CommandInput2,
+  CommandItem as CommandItem2,
+  CommandList as CommandList2
+} from "@petrarca/sonnet-ui";
+import { Popover as Popover2, PopoverContent as PopoverContent2, PopoverTrigger as PopoverTrigger2 } from "@petrarca/sonnet-ui";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function RemovableBadge({
+  option,
+  isDisabled,
+  badgeColor,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs6(Badge, { variant: "secondary", badgeColor, className: "mr-1", children: [
+    option.label,
+    !isDisabled && /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        className: "ml-1 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);
+        },
+        onMouseDown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        onClick: (e) => onRemove(option.value, e),
+        children: /* @__PURE__ */ jsx7(X2, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
+      }
+    )
+  ] });
+}
+function SelectedBadges({
+  selectedOptions,
+  effectiveMaxDisplay,
+  expanded,
+  maxDisplay,
+  isDisabled,
+  badgeColor,
+  placeholder,
+  onRemove,
+  onExpand,
+  onCollapse
+}) {
+  if (selectedOptions.length === 0) {
+    return /* @__PURE__ */ jsx7("span", { className: "text-muted-foreground", children: placeholder });
+  }
+  const displayedBadges = selectedOptions.slice(0, effectiveMaxDisplay);
+  const remainingCount = selectedOptions.length - effectiveMaxDisplay;
+  const showCollapse = expanded && remainingCount <= 0 && selectedOptions.length > maxDisplay;
+  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
+    displayedBadges.map((option) => /* @__PURE__ */ jsx7(
+      RemovableBadge,
+      {
+        option,
+        isDisabled,
+        badgeColor,
+        onRemove
+      },
+      option.value
+    )),
+    remainingCount > 0 && /* @__PURE__ */ jsxs6(
+      Badge,
+      {
+        variant: "secondary",
+        badgeColor,
+        className: "mr-1 cursor-pointer hover:bg-secondary/80",
+        onClick: onExpand,
+        children: [
+          "+",
+          remainingCount,
+          " more"
+        ]
+      }
+    ),
+    showCollapse && /* @__PURE__ */ jsx7(
+      Badge,
+      {
+        variant: "secondary",
+        badgeColor,
+        className: "mr-1 cursor-pointer hover:bg-secondary/80",
+        onClick: onCollapse,
+        children: "Show less"
+      }
+    )
+  ] });
+}
+function MultiSelectDropdown({
+  searchPlaceholder,
+  searchQuery,
+  onSearchChange,
+  loading,
+  emptyMessage,
+  options,
+  value,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs6(Command2, { shouldFilter: false, children: [
+    /* @__PURE__ */ jsx7(
+      CommandInput2,
+      {
+        placeholder: searchPlaceholder,
+        value: searchQuery,
+        onValueChange: onSearchChange
+      }
+    ),
+    /* @__PURE__ */ jsxs6(CommandList2, { children: [
+      /* @__PURE__ */ jsx7(CommandEmpty2, { children: loading ? "Loading..." : emptyMessage }),
+      /* @__PURE__ */ jsx7(CommandGroup2, { children: options.filter(
+        (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
+      ).map((option) => /* @__PURE__ */ jsxs6(
+        CommandItem2,
+        {
+          value: option.value,
+          onSelect,
+          children: [
+            /* @__PURE__ */ jsx7(
+              Check2,
+              {
+                className: cn7(
+                  "mr-2 h-4 w-4",
+                  value.includes(option.value) ? "opacity-100" : "opacity-0"
+                )
+              }
+            ),
+            option.label
+          ]
+        },
+        option.value
+      )) })
+    ] })
+  ] });
+}
+function useMultiSelectState(value, onChange, onBlur) {
+  const [open, setOpen] = React6.useState(false);
+  const [searchQuery, setSearchQuery] = React6.useState("");
+  const [expanded, setExpanded] = React6.useState(false);
+  const handleSelect = (selectedValue) => {
+    const newValue = value.includes(selectedValue) ? value.filter((v) => v !== selectedValue) : [...value, selectedValue];
+    onChange?.(newValue);
+  };
+  const handleRemove = (valueToRemove, e) => {
+    e.stopPropagation();
+    onChange?.(value.filter((v) => v !== valueToRemove));
+  };
+  const handleClearAll = (e) => {
+    e.stopPropagation();
+    onChange?.([]);
+  };
+  const handleOpenChange = (newOpen) => {
+    setOpen(newOpen);
+    if (newOpen) return;
+    setSearchQuery("");
+    setExpanded(false);
+    onBlur?.();
+  };
+  const handleExpand = (e) => {
+    e.stopPropagation();
+    setExpanded(true);
+  };
+  const handleCollapse = (e) => {
+    e.stopPropagation();
+    setExpanded(false);
+  };
+  return {
+    open,
+    searchQuery,
+    setSearchQuery,
+    expanded,
+    handleSelect,
+    handleRemove,
+    handleClearAll,
+    handleOpenChange,
+    handleExpand,
+    handleCollapse
+  };
+}
+function resolveMultiSelectDefaults(props) {
+  return {
+    placeholder: props.placeholder ?? "Select...",
+    searchPlaceholder: props.searchPlaceholder ?? "Search...",
+    emptyMessage: props.emptyMessage ?? "No results found",
+    clearable: props.clearable ?? true,
+    disabled: props.disabled ?? false,
+    readOnly: props.readOnly ?? false,
+    loading: props.loading ?? false,
+    maxDisplay: props.maxDisplay ?? Infinity
+  };
+}
+function MultiSelectTrigger({
+  id,
+  open,
+  error,
+  className,
+  isDisabled,
+  autoFocus,
+  clearable,
+  hasValues,
+  selectedOptions,
+  effectiveMaxDisplay,
+  expanded,
+  maxDisplay,
+  badgeColor,
+  placeholder,
+  onRemove,
+  onExpand,
+  onCollapse,
+  onClearAll
+}) {
+  return /* @__PURE__ */ jsxs6(
+    Button2,
+    {
+      id,
+      variant: "outline",
+      role: "combobox",
+      "aria-expanded": open,
+      className: cn7(
+        "w-full justify-between min-h-10 h-auto",
+        error && "border-destructive",
+        className
+      ),
+      disabled: isDisabled,
+      autoFocus,
+      children: [
+        /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-1 flex-1", children: /* @__PURE__ */ jsx7(
+          SelectedBadges,
+          {
+            selectedOptions,
+            effectiveMaxDisplay,
+            expanded,
+            maxDisplay,
+            isDisabled,
+            badgeColor,
+            placeholder,
+            onRemove,
+            onExpand,
+            onCollapse
+          }
+        ) }),
+        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 ml-2", children: [
+          clearable && hasValues && !isDisabled && /* @__PURE__ */ jsx7(
+            X2,
+            {
+              className: "h-4 w-4 opacity-50 hover:opacity-100",
+              onClick: onClearAll
+            }
+          ),
+          /* @__PURE__ */ jsx7(ChevronsUpDown2, { className: "h-4 w-4 shrink-0 opacity-50" })
+        ] })
+      ]
+    }
+  );
+}
+function FormMultiSelect(props) {
+  const {
+    label,
+    description,
+    error,
+    required,
+    wrapperClassName,
+    options,
+    onChange,
+    onBlur,
+    className,
+    id,
+    name,
+    autoFocus,
+    badgeColor
+  } = props;
+  const value = props.value ?? [];
+  const generatedId = React6.useId();
+  const fieldId = id ?? generatedId;
+  const {
+    placeholder,
+    searchPlaceholder,
+    emptyMessage,
+    clearable,
+    disabled,
+    readOnly,
+    loading,
+    maxDisplay
+  } = resolveMultiSelectDefaults(props);
+  const selectedOptions = options.filter((opt) => value.includes(opt.value));
+  const isDisabled = disabled || readOnly || loading;
+  const {
+    open,
+    searchQuery,
+    setSearchQuery,
+    expanded,
+    handleSelect,
+    handleRemove,
+    handleClearAll,
+    handleOpenChange,
+    handleExpand,
+    handleCollapse
+  } = useMultiSelectState(value, onChange, onBlur);
+  const effectiveMaxDisplay = expanded ? Infinity : maxDisplay;
+  return /* @__PURE__ */ jsxs6(
+    FormFieldWrapper,
+    {
+      inputId: fieldId,
+      label: resolveFieldLabel(label),
+      description,
+      error,
+      required,
+      className: wrapperClassName,
+      children: [
+        /* @__PURE__ */ jsxs6(Popover2, { open, onOpenChange: handleOpenChange, children: [
+          /* @__PURE__ */ jsx7(PopoverTrigger2, { asChild: true, children: /* @__PURE__ */ jsx7(
+            MultiSelectTrigger,
+            {
+              id: fieldId,
+              open,
+              error,
+              className,
+              isDisabled,
+              autoFocus,
+              clearable,
+              hasValues: value.length > 0,
+              selectedOptions,
+              effectiveMaxDisplay,
+              expanded,
+              maxDisplay,
+              badgeColor,
+              placeholder,
+              onRemove: handleRemove,
+              onExpand: handleExpand,
+              onCollapse: handleCollapse,
+              onClearAll: handleClearAll
+            }
+          ) }),
+          /* @__PURE__ */ jsx7(
+            PopoverContent2,
+            {
+              className: "w-[--radix-popover-trigger-width] p-0",
+              align: "start",
+              children: /* @__PURE__ */ jsx7(
+                MultiSelectDropdown,
+                {
+                  searchPlaceholder,
+                  searchQuery,
+                  onSearchChange: setSearchQuery,
+                  loading,
+                  emptyMessage,
+                  options,
+                  value,
+                  onSelect: handleSelect
+                }
+              )
+            }
+          )
+        ] }),
+        name && value.map((v) => /* @__PURE__ */ jsx7("input", { type: "hidden", name, value: v }, v))
+      ]
+    }
+  );
+}
+
+// src/FormTagsInput.tsx
+import * as React7 from "react";
+import { X as X3 } from "lucide-react";
+import { cn as cn8 } from "@petrarca/sonnet-core";
+import { Input as Input3 } from "@petrarca/sonnet-ui";
+import { Badge as Badge2 } from "@petrarca/sonnet-ui";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function TagBadge({ tag, index, isDisabled, onRemove }) {
+  return /* @__PURE__ */ jsxs7(Badge2, { variant: "secondary", className: "gap-1", children: [
+    tag,
+    !isDisabled && /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: "ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            onRemove(index);
+          }
+        },
+        onMouseDown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove(index);
+        },
+        children: /* @__PURE__ */ jsx8(X3, { className: "h-3 w-3 text-muted-foreground hover:text-foreground" })
+      }
+    )
+  ] });
+}
+function useTagManagement(value, onChange, allowDuplicates, maxTags, splitKeys) {
+  const [inputValue, setInputValue] = React7.useState("");
+  const addTag = React7.useCallback(
+    (tag) => {
+      const trimmedTag = tag.trim();
+      if (!trimmedTag) return;
+      if (!allowDuplicates && value.includes(trimmedTag)) return;
+      if (maxTags && value.length >= maxTags) return;
+      onChange?.([...value, trimmedTag]);
+      setInputValue("");
+    },
+    [value, onChange, allowDuplicates, maxTags]
+  );
+  const removeTag = React7.useCallback(
+    (indexToRemove) => {
+      onChange?.(value.filter((_, index) => index !== indexToRemove));
+    },
+    [value, onChange]
+  );
+  const handleKeyDown = React7.useCallback(
+    (e) => {
+      if (splitKeys.includes(e.key)) {
+        e.preventDefault();
+        addTag(inputValue);
+        return;
+      }
+      if (e.key === "Backspace" && !inputValue && value.length > 0) {
+        e.preventDefault();
+        removeTag(value.length - 1);
+      }
+    },
+    [splitKeys, inputValue, value.length, addTag, removeTag]
+  );
+  const handleInputChange = React7.useCallback(
+    (e) => {
+      const newValue = e.target.value;
+      if (!splitKeys.includes(",") || !newValue.includes(",")) {
+        setInputValue(newValue);
+        return;
+      }
+      const parts = newValue.split(",");
+      parts.slice(0, -1).forEach((tag) => addTag(tag));
+      setInputValue(parts[parts.length - 1]);
+    },
+    [splitKeys, addTag]
+  );
+  return { inputValue, addTag, removeTag, handleKeyDown, handleInputChange };
+}
+function resolveTagsDefaults(props) {
+  return {
+    required: props.required ?? false,
+    placeholder: props.placeholder ?? "Enter tag and press Enter",
+    splitKeys: props.splitKeys ?? ["Enter", ","],
+    allowDuplicates: props.allowDuplicates ?? false
+  };
+}
+var FormTagsInput = React7.forwardRef((props, ref) => {
+  const {
+    label,
+    description,
+    error,
+    wrapperClassName,
+    id,
+    name,
+    value = [],
+    onChange,
+    disabled,
+    readOnly,
+    maxTags
+  } = props;
+  const { required, placeholder, splitKeys, allowDuplicates } = resolveTagsDefaults(props);
+  const generatedId = React7.useId();
+  const fieldId = id ?? generatedId;
+  const inputRef = React7.useRef(null);
+  React7.useImperativeHandle(ref, () => inputRef.current);
+  const isDisabled = disabled || readOnly;
+  const { inputValue, removeTag, handleKeyDown, handleInputChange } = useTagManagement(value, onChange, allowDuplicates, maxTags, splitKeys);
+  const handleContainerClick = () => {
+    inputRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsx8(
+    FormFieldWrapper,
+    {
+      inputId: fieldId,
+      label: resolveFieldLabel(label),
+      description,
+      error,
+      required,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: cn8(
+            "flex min-h-10 w-full flex-wrap gap-1.5 rounded-md border border-input bg-background px-3 py-2 text-sm",
+            isDisabled && "cursor-not-allowed opacity-50",
+            error && "border-destructive"
+          ),
+          onClick: handleContainerClick,
+          children: [
+            value.map((tag, index) => /* @__PURE__ */ jsx8(
+              TagBadge,
+              {
+                tag,
+                index,
+                isDisabled: !!isDisabled,
+                onRemove: removeTag
+              },
+              index
+            )),
+            /* @__PURE__ */ jsx8(
+              Input3,
+              {
+                ref: inputRef,
+                id: fieldId,
+                name,
+                value: inputValue,
+                onChange: handleInputChange,
+                onKeyDown: handleKeyDown,
+                placeholder: value.length === 0 ? placeholder : "",
+                disabled: !!isDisabled,
+                className: "flex-1 min-w-[120px] border-0 p-0 h-auto focus-visible:ring-0 focus-visible:ring-offset-0"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
+FormTagsInput.displayName = "FormTagsInput";
+
+// src/FormQuantityInput.tsx
+import React8, { useCallback as useCallback2, useEffect as useEffect2, useId as useId8, useMemo, useState as useState4 } from "react";
+import { ChevronsUpDown as ChevronsUpDown3 } from "lucide-react";
+import { cn as cn9 } from "@petrarca/sonnet-core";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput
+} from "@petrarca/sonnet-ui";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var VALID_NUMERIC_INPUT = /^-?\d*[.,]?\d*$/;
+var INCOMPLETE_SENTINELS = /* @__PURE__ */ new Set(["", ".", "-", "-."]);
+function roundToPrecision(n, p) {
+  const factor = Math.pow(10, p);
+  return Math.round((n + Number.EPSILON) * factor) / factor;
+}
+function validateQuantity(numValue, lo, hi, unitLabel) {
+  if (lo !== void 0 && numValue < lo) {
+    return `Value must be at least ${lo}${unitLabel ? ` ${unitLabel}` : ""}`;
+  }
+  if (hi !== void 0 && numValue > hi) {
+    return `Value must be at most ${hi}${unitLabel ? ` ${unitLabel}` : ""}`;
+  }
+  return "";
+}
+function roundAndFormat(numValue, precision) {
+  const rounded = precision !== void 0 ? roundToPrecision(numValue, precision) : numValue;
+  const formatted = precision !== void 0 ? rounded.toFixed(precision) : String(rounded);
+  return { rounded, formatted };
+}
+function UnitAddon({
+  units,
+  currentUnit,
+  addonAlign,
+  disabled,
+  readOnly,
+  onChange
+}) {
+  if (units.length === 0) return null;
+  if (units.length === 1) {
+    return /* @__PURE__ */ jsx9(InputGroupAddon, { align: addonAlign, children: /* @__PURE__ */ jsx9("span", { className: "text-sm text-muted-foreground", children: units[0].label }) });
+  }
+  return /* @__PURE__ */ jsx9(InputGroupAddon, { align: addonAlign, children: /* @__PURE__ */ jsxs8("div", { className: "relative flex items-center", children: [
+    /* @__PURE__ */ jsx9(
+      "select",
+      {
+        value: currentUnit,
+        onChange,
+        disabled: disabled || readOnly,
+        className: "cursor-pointer appearance-none border-0 bg-transparent py-0 pr-5 pl-1 text-sm text-muted-foreground outline-none hover:text-foreground focus:text-foreground",
+        "aria-label": "Unit",
+        children: units.map((u) => /* @__PURE__ */ jsx9("option", { value: u.value, children: u.label }, u.value))
+      }
+    ),
+    /* @__PURE__ */ jsx9(ChevronsUpDown3, { className: "pointer-events-none absolute right-0 h-3.5 w-3.5 text-muted-foreground/60" })
+  ] }) });
+}
+function useUnitState(value, units, unitPosition, min, max) {
+  const currentUnit = useMemo(() => {
+    const preferred = value?.unit;
+    if (preferred && units.some((u) => u.value === preferred)) return preferred;
+    return units[0]?.value ?? "";
+  }, [value?.unit, units]);
+  const unitMeta = useMemo(
+    () => units.find((u) => u.value === currentUnit),
+    [units, currentUnit]
+  );
+  const effectiveMin = unitMeta?.min ?? min;
+  const effectiveMax = unitMeta?.max ?? max;
+  const effectivePosition = unitMeta?.position ?? unitPosition;
+  const addonAlign = effectivePosition === "prefix" ? "inline-start" : "inline-end";
+  return { currentUnit, effectiveMin, effectiveMax, addonAlign };
+}
+function useQuantityInput(value, onChange, onBlur, currentUnit, precision, effectiveMin, effectiveMax, externalError) {
+  const [rawInput, setRawInput] = useState4(
+    value?.value !== void 0 ? String(value.value) : ""
+  );
+  const [validationError, setValidationError] = useState4("");
+  useEffect2(() => {
+    const external = value?.value !== void 0 ? String(value.value) : "";
+    setRawInput((prev) => {
+      const parsed = parseFloat(prev.replace(",", "."));
+      if (!isNaN(parsed) && parsed === value?.value) return prev;
+      return external;
+    });
+  }, [value?.value]);
+  const error = externalError || validationError;
+  const emit = useCallback2(
+    (numValue, unitValue) => {
+      onChange?.({ value: numValue, unit: unitValue });
+    },
+    [onChange]
+  );
+  const handleInputChange = useCallback2(
+    (e) => {
+      const raw = e.target.value;
+      if (raw !== "" && !VALID_NUMERIC_INPUT.test(raw)) return;
+      setRawInput(raw);
+      setValidationError("");
+    },
+    []
+  );
+  const handleInputBlur = useCallback2(() => {
+    const normalized = rawInput.replace(",", ".");
+    if (INCOMPLETE_SENTINELS.has(normalized)) {
+      if (normalized !== "") setRawInput("");
+      emit(void 0, currentUnit);
+      setValidationError("");
+      onBlur?.();
+      return;
+    }
+    const numValue = parseFloat(normalized);
+    if (isNaN(numValue)) {
+      setRawInput("");
+      emit(void 0, currentUnit);
+      onBlur?.();
+      return;
+    }
+    const { rounded, formatted } = roundAndFormat(numValue, precision);
+    setRawInput(formatted);
+    setValidationError(
+      validateQuantity(rounded, effectiveMin, effectiveMax, currentUnit)
+    );
+    emit(rounded, currentUnit);
+    onBlur?.();
+  }, [
+    rawInput,
+    currentUnit,
+    precision,
+    effectiveMin,
+    effectiveMax,
+    emit,
+    onBlur
+  ]);
+  return {
+    rawInput,
+    error,
+    handleInputChange,
+    handleInputBlur,
+    emit,
+    setValidationError
+  };
+}
+var FormQuantityInput = React8.forwardRef((allProps, ref) => {
+  const {
+    value,
+    onChange,
+    onBlur,
+    precision,
+    step,
+    min,
+    max,
+    label,
+    description,
+    placeholder,
+    required,
+    disabled,
+    readOnly,
+    autoFocus,
+    wrapperClassName,
+    className,
+    name
+  } = allProps;
+  const units = useMemo(() => allProps.units ?? [], [allProps.units]);
+  const unitPosition = allProps.unitPosition ?? "suffix";
+  const error = allProps.error;
+  const generatedId = useId8();
+  const inputId = allProps.id ?? generatedId;
+  const { currentUnit, effectiveMin, effectiveMax, addonAlign } = useUnitState(
+    value,
+    units,
+    unitPosition,
+    min,
+    max
+  );
+  const {
+    rawInput,
+    error: resolvedError,
+    handleInputChange,
+    handleInputBlur,
+    emit,
+    setValidationError
+  } = useQuantityInput(
+    value,
+    onChange,
+    onBlur,
+    currentUnit,
+    precision,
+    effectiveMin,
+    effectiveMax,
+    error
+  );
+  const handleUnitChange = useCallback2(
+    (e) => {
+      const unitValue = e.target.value;
+      setValidationError("");
+      const normalized = rawInput.replace(",", ".");
+      const numValue = parseFloat(normalized);
+      if (isNaN(numValue)) return;
+      const um = units.find((u) => u.value === unitValue);
+      const lo = um?.min ?? min;
+      const hi = um?.max ?? max;
+      setValidationError(validateQuantity(numValue, lo, hi, unitValue));
+      emit(numValue, unitValue);
+    },
+    [rawInput, units, min, max, emit, setValidationError]
+  );
+  const unitAddon = useMemo(
+    () => /* @__PURE__ */ jsx9(
+      UnitAddon,
+      {
+        units,
+        currentUnit,
+        addonAlign,
+        disabled,
+        readOnly,
+        onChange: handleUnitChange
+      }
+    ),
+    [units, currentUnit, addonAlign, disabled, readOnly, handleUnitChange]
+  );
+  return /* @__PURE__ */ jsx9(
+    FormFieldWrapper,
+    {
+      inputId,
+      label,
+      description,
+      error: resolvedError,
+      required,
+      className: wrapperClassName,
+      children: /* @__PURE__ */ jsxs8(
+        InputGroup,
+        {
+          "data-disabled": disabled || void 0,
+          className: cn9(resolvedError && "border-destructive"),
+          children: [
+            /* @__PURE__ */ jsx9(
+              InputGroupInput,
+              {
+                id: inputId,
+                name,
+                ref,
+                type: "text",
+                inputMode: "decimal",
+                value: rawInput,
+                onChange: handleInputChange,
+                onBlur: handleInputBlur,
+                placeholder,
+                disabled,
+                readOnly,
+                autoFocus,
+                step,
+                className,
+                "aria-invalid": resolvedError ? "true" : "false",
+                "aria-describedby": getAriaDescribedBy(
+                  inputId,
+                  resolvedError,
+                  description
+                ),
+                "aria-required": required,
+                "aria-valuemin": effectiveMin,
+                "aria-valuemax": effectiveMax
+              }
+            ),
+            unitAddon
+          ]
+        }
+      )
+    }
+  );
+});
+FormQuantityInput.displayName = "FormQuantityInput";
+
+// src/FormActions.tsx
+import { Button as Button3 } from "@petrarca/sonnet-ui";
+import { SimpleGroup } from "@petrarca/sonnet-ui";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function FormActions({
+  onSave,
+  onCancel,
+  disabled = false,
+  hasChanges,
+  isValid,
+  saveLabel = "Save",
+  cancelLabel = "Cancel",
+  showCancel = true
+}) {
+  return /* @__PURE__ */ jsxs9(SimpleGroup, { justify: "flex-end", mt: "md", children: [
+    showCancel && /* @__PURE__ */ jsx10(Button3, { variant: "outline", onClick: onCancel, disabled, children: cancelLabel }),
+    /* @__PURE__ */ jsx10(Button3, { onClick: onSave, disabled: disabled || !hasChanges || !isValid, children: saveLabel })
+  ] });
+}
+
+// src/ExtraPropertiesCard.tsx
+import { useMemo as useMemo2 } from "react";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { Card } from "@petrarca/sonnet-ui";
+import { useDisclosure } from "@petrarca/sonnet-core/hooks";
+import { Collapsible, CollapsibleContent } from "@petrarca/sonnet-ui";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function ExtraPropertiesCard({ properties, schema }) {
+  const [opened, { toggle }] = useDisclosure(false);
+  const extraProperties = useMemo2(() => {
+    if (!schema) return null;
+    const schemaProps = schema.properties ?? {};
+    const extra = Object.fromEntries(
+      Object.entries(properties).filter(([k]) => !(k in schemaProps))
+    );
+    return Object.keys(extra).length > 0 ? extra : null;
+  }, [properties, schema]);
+  if (!extraProperties) return null;
+  return /* @__PURE__ */ jsxs10(Card, { className: "border p-3", children: [
+    /* @__PURE__ */ jsxs10(
+      "p",
+      {
+        className: `flex items-center gap-1 text-sm font-medium cursor-pointer select-none ${opened ? "mb-1" : ""}`,
+        onClick: toggle,
+        children: [
+          opened ? /* @__PURE__ */ jsx11(ChevronDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx11(ChevronRight, { className: "h-3.5 w-3.5" }),
+          "Extra Properties (not in schema)"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx11(Collapsible, { open: opened, children: /* @__PURE__ */ jsx11(CollapsibleContent, { children: /* @__PURE__ */ jsx11("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx11("code", { children: JSON.stringify(extraProperties, null, 2) }) }) }) })
+  ] });
+}
+var ExtraPropertiesCard_default = ExtraPropertiesCard;
+
+// src/JsonSchemaFormRenderer.tsx
+import React11, { useCallback as useCallback8, useMemo as useMemo7 } from "react";
+import { SimpleStack } from "@petrarca/sonnet-ui";
+import { isFieldRequired } from "@petrarca/sonnet-core/schema";
+import { FORM_ITEM_ID_FIELD as FORM_ITEM_ID_FIELD2 } from "@petrarca/sonnet-core";
+
+// src/widgets/types.ts
+function firstError(rawErrors) {
+  return rawErrors && rawErrors.length > 0 ? rawErrors[0] : void 0;
+}
+
+// src/widgets/TextInputWidget.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+function inputTypeFromFormat(format) {
+  if (format === "email") return "email";
+  if (format === "uri" || format === "url") return "url";
+  return "text";
+}
+function TextInputWidget({
+  id,
+  name,
+  value,
+  onChange,
+  onBlur,
+  propertySchema,
+  required,
+  disabled,
+  readonly,
+  rawErrors,
+  label,
+  description,
+  placeholder,
+  autofocus,
+  options
+}) {
+  const error = firstError(rawErrors);
+  const compact = options?.compact;
+  return /* @__PURE__ */ jsx12(
+    FormInput,
+    {
+      id,
+      name,
+      value: value !== void 0 && value !== null ? String(value) : "",
+      onChange: (event) => onChange(event.currentTarget.value),
+      onBlur: () => onBlur?.(id, value),
+      label,
+      description,
+      placeholder,
+      required,
+      disabled,
+      readOnly: readonly,
+      error,
+      type: options?.inputType ?? inputTypeFromFormat(propertySchema.format),
+      minLength: propertySchema.minLength,
+      maxLength: propertySchema.maxLength,
+      autoFocus: autofocus,
+      compact,
+      className: compact ? "h-8 text-xs" : void 0
+    }
+  );
+}
+
+// src/widgets/TextareaWidget.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function TextareaWidget({
+  id,
+  name,
+  value,
+  onChange,
+  onBlur,
+  propertySchema,
+  required,
+  disabled,
+  readonly,
+  rawErrors,
+  label,
+  description,
+  placeholder,
+  autofocus,
+  options = {}
+}) {
+  const minRows = options.rows || options.minRows || 3;
+  const autosize = options.autosize !== false;
+  const error = firstError(rawErrors);
+  return /* @__PURE__ */ jsx13(
+    FormTextarea,
+    {
+      id,
+      name,
+      value: value !== void 0 && value !== null ? String(value) : "",
+      onChange: (event) => onChange(event.currentTarget.value),
+      onBlur: () => onBlur?.(id, value),
+      label,
+      description,
+      placeholder,
+      required,
+      disabled,
+      readOnly: readonly,
+      error,
+      minRows,
+      autosize,
+      minLength: propertySchema.minLength,
+      maxLength: propertySchema.maxLength,
+      autoFocus: autofocus
+    }
+  );
+}
+
+// src/widgets/NumberWidget.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function NumberWidget({
+  id,
+  name,
+  value,
+  onChange,
+  onBlur,
+  propertySchema,
+  required,
+  disabled,
+  readonly,
+  rawErrors,
+  label,
+  description,
+  placeholder,
+  autofocus,
+  options = {}
+}) {
+  const isInteger = propertySchema.type === "integer";
+  const step = options.step ?? (isInteger ? 1 : void 0);
+  const allowDecimal = options.allowDecimal ?? !isInteger;
+  const error = firstError(rawErrors);
+  return /* @__PURE__ */ jsx14(
+    FormNumberInput,
+    {
+      id,
+      name,
+      value: value !== void 0 && value !== null ? Number(value) : void 0,
+      onChange: (val) => onChange(val),
+      onBlur: () => onBlur?.(id, value),
+      label,
+      description,
+      placeholder,
+      required,
+      disabled,
+      readOnly: readonly,
+      error,
+      min: propertySchema.minimum,
+      max: propertySchema.maximum,
+      step,
+      allowDecimal,
+      autoFocus: autofocus
+    }
+  );
+}
+
+// src/widgets/CheckboxWidget.tsx
+import { useCallback as useCallback3 } from "react";
+import { isNullableBoolean } from "@petrarca/sonnet-core/schema";
+import { jsx as jsx15 } from "react/jsx-runtime";
+function CheckboxWidget({
+  id,
+  value,
+  onChange,
+  onBlur,
+  disabled,
+  readonly,
+  rawErrors,
+  label,
+  description,
+  autofocus,
+  propertySchema,
+  options
+}) {
+  const error = firstError(rawErrors);
+  const compact = options?.compact;
+  const isTriState = isNullableBoolean(propertySchema);
+  const isChecked = value === true;
+  const isIndeterminate = isTriState && value === null;
+  const checkedState = isIndeterminate ? "indeterminate" : isChecked;
+  const handleChange = useCallback3(
+    (_newChecked) => {
+      if (isTriState) {
+        if (value === null) {
+          onChange(true);
+        } else if (value === true) {
+          onChange(false);
+        } else {
+          onChange(null);
+        }
+      } else {
+        onChange(_newChecked === true);
+      }
+    },
+    [isTriState, value, onChange]
+  );
+  return /* @__PURE__ */ jsx15(
+    FormCheckbox,
+    {
+      id,
+      checked: checkedState,
+      onChange: handleChange,
+      onBlur: () => onBlur?.(id, value),
+      label,
+      description,
+      disabled,
+      readOnly: readonly,
+      error,
+      autoFocus: autofocus,
+      compact
+    }
+  );
+}
+
+// src/widgets/SelectWidget.tsx
+import { useRef as useRef3 } from "react";
+import { extractEnumValues } from "@petrarca/sonnet-core/schema";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function buildSelectOptions(propertySchema, enumNames) {
+  const enumValues = extractEnumValues(propertySchema);
+  return enumValues.map((val) => {
+    const key = String(val);
+    return { value: key, label: enumNames[key] || key };
+  });
+}
+function normalizeMultiValue(value) {
+  if (Array.isArray(value)) return value.map(String);
+  if (value) return [String(value)];
+  return [];
+}
+function normalizeSingleValue(value) {
+  if (value !== void 0 && value !== null) return String(value);
+  return null;
+}
+function SelectWidget(props) {
+  const {
+    id,
+    name,
+    value,
+    onChange,
+    onBlur,
+    propertySchema,
+    required,
+    disabled,
+    readonly,
+    rawErrors,
+    label,
+    description,
+    placeholder,
+    autofocus
+  } = props;
+  const widgetOptions = props.options ?? {};
+  const valueRef = useRef3(value);
+  valueRef.current = value;
+  const enumNames = widgetOptions.enumNames || {};
+  const clearable = widgetOptions.clearable !== false && !required;
+  const isMultiple = widgetOptions.multiple ?? propertySchema.type === "array";
+  const selectOptions = buildSelectOptions(propertySchema, enumNames);
+  const error = firstError(rawErrors);
+  const compact = widgetOptions?.compact;
+  const triggerClassName = compact ? "h-8 text-xs" : void 0;
+  const handleBlur = () => onBlur?.(id, valueRef.current);
+  if (isMultiple) {
+    return /* @__PURE__ */ jsx16(
+      FormMultiSelect,
+      {
+        id,
+        name,
+        options: selectOptions,
+        value: normalizeMultiValue(value),
+        onChange: (newValue) => onChange(newValue || []),
+        label,
+        description,
+        placeholder,
+        required,
+        disabled,
+        readOnly: readonly,
+        error,
+        clearable,
+        autoFocus: autofocus,
+        badgeColor: widgetOptions.badgeColor,
+        onBlur: handleBlur,
+        className: triggerClassName
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(
+    FormSelect,
+    {
+      id,
+      name,
+      options: selectOptions,
+      value: normalizeSingleValue(value),
+      onChange: (val) => onChange(val || ""),
+      label,
+      description,
+      placeholder,
+      required,
+      disabled,
+      readOnly: readonly,
+      error,
+      clearable,
+      autoFocus: autofocus,
+      onBlur: handleBlur,
+      className: triggerClassName,
+      compact
+    }
+  );
+}
+
+// src/widgets/TagsInputWidget.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function TagsInputWidget({
+  id,
+  name,
+  value,
+  onChange,
+  required,
+  disabled,
+  readonly,
+  rawErrors,
+  label,
+  description,
+  placeholder,
+  options
+}) {
+  const error = firstError(rawErrors);
+  const tags = Array.isArray(value) ? value.map(String) : [];
+  return /* @__PURE__ */ jsx17(
+    FormTagsInput,
+    {
+      id,
+      name,
+      value: tags,
+      onChange: (newTags) => onChange(newTags),
+      label,
+      description,
+      placeholder: placeholder ?? "Type and press Enter",
+      required,
+      disabled,
+      readOnly: readonly,
+      error,
+      maxTags: options?.maxTags,
+      splitKeys: options?.splitKeys,
+      allowDuplicates: false
+    }
+  );
+}
+
+// src/widgets/JsonEditorWidget.tsx
+import { useCallback as useCallback4, useState as useState5 } from "react";
+import { JsonEditor } from "@petrarca/sonnet-ui/json-editor";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+var FULL_DOCUMENT = ["/"];
+function JsonEditorWidget({
+  id,
+  value,
+  onChange,
+  label,
+  description,
+  required,
+  options
+}) {
+  const [raw, setRaw] = useState5(
+    value != null ? JSON.stringify(value, null, 2) : ""
+  );
+  const height = options?.height ?? "240px";
+  const handleChange = useCallback4(
+    (val) => {
+      setRaw(val);
+      try {
+        const parsed = JSON.parse(val);
+        onChange(parsed);
+      } catch {
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
+    label && /* @__PURE__ */ jsxs11("label", { htmlFor: id, className: "text-sm font-medium leading-none", children: [
+      label,
+      required && /* @__PURE__ */ jsx18("span", { className: "text-destructive ml-1", children: "*" })
+    ] }),
+    description && /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsx18(
+      JsonEditor,
+      {
+        value: raw,
+        editablePaths: FULL_DOCUMENT,
+        onChange: handleChange,
+        height,
+        className: "rounded-md border overflow-hidden"
+      }
+    )
+  ] });
+}
+
+// src/widgets/EntitySelectWidget.tsx
+import { useMemo as useMemo3 } from "react";
+import { EntitySelect } from "@petrarca/sonnet-ui";
+import { useFetcherFactory } from "@petrarca/sonnet-core/entityOptions";
+import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var VALID_MODES = ["eager", "typeahead", "explicit"];
+function resolveSelectMode(options) {
+  const rawMode = options?.mode;
+  if (typeof rawMode === "string" && VALID_MODES.includes(rawMode)) {
+    return rawMode;
+  }
+  return "eager";
+}
+function resolveMinChars(options) {
+  const rawMinChars = options?.minChars;
+  if (typeof rawMinChars === "number" && rawMinChars >= 1) return rawMinChars;
+  return 1;
+}
+function buildRestConfig(options) {
+  if (!("endpoint" in options) || !options.endpoint) return null;
+  return {
+    endpoint: String(options.endpoint),
+    valueKey: String(options.valueKey ?? "id"),
+    labelKey: String(options.labelKey ?? "name"),
+    searchKey: options.searchKey ? String(options.searchKey) : void 0
+  };
+}
+function buildGraphqlConfig(options) {
+  if (!("query" in options) || !options.query) return null;
+  return {
+    query: String(options.query),
+    dataPath: String(options.dataPath ?? ""),
+    valueKey: String(options.valueKey ?? "id"),
+    labelKey: String(options.labelKey ?? "name")
+  };
+}
+function buildFetcherConfig(options) {
+  if (!options) return null;
+  return buildRestConfig(options) ?? buildGraphqlConfig(options);
+}
+function deriveQueryKey(config, fallbackName) {
+  if (!config) return fallbackName;
+  if ("endpoint" in config) return config.endpoint;
+  return `graphql:${config.dataPath}`;
+}
+function EntitySelectWidget({
+  id,
+  name,
+  value,
+  onChange,
+  onBlur,
+  label,
+  description,
+  placeholder,
+  required,
+  disabled,
+  readonly,
+  rawErrors,
+  options
+}) {
+  const createFetcher = useFetcherFactory();
+  const selectMode = resolveSelectMode(options);
+  const selectMinChars = resolveMinChars(options);
+  const fetcherConfig = useMemo3(() => buildFetcherConfig(options), [options]);
+  const fetcher = useMemo3(() => {
+    if (!fetcherConfig) return null;
+    return createFetcher(fetcherConfig);
+  }, [createFetcher, fetcherConfig]);
+  const queryKey = useMemo3(
+    () => deriveQueryKey(fetcherConfig, name ?? ""),
+    [fetcherConfig, name]
+  );
+  if (!fetcher) {
+    return /* @__PURE__ */ jsxs12("div", { className: "text-sm text-destructive", children: [
+      'EntitySelectWidget: missing endpoint or query in x-ui-options for field "',
+      name,
+      '"'
+    ] });
+  }
+  return /* @__PURE__ */ jsx19(
+    EntitySelect,
+    {
+      id,
+      fetcher,
+      queryKey,
+      mode: selectMode,
+      minChars: selectMinChars,
+      value: typeof value === "string" ? value : null,
+      onChange: (v) => onChange(v ?? ""),
+      onBlur: () => onBlur?.(id, value),
+      label: label || false,
+      description,
+      placeholder,
+      required,
+      disabled: disabled || readonly,
+      error: firstError(rawErrors)
+    }
+  );
+}
+
+// src/widgets/ObjectWidget.tsx
+import { useMemo as useMemo4 } from "react";
+
+// src/hooks/useNestedFormContext.ts
+import { useContext } from "react";
+
+// src/NestedFormContext.tsx
+import { createContext } from "react";
+var NestedFormContext = createContext(
+  null
+);
+
+// src/hooks/useNestedFormContext.ts
+function useNestedFormContext() {
+  const ctx = useContext(NestedFormContext);
+  if (!ctx) {
+    throw new Error(
+      "useNestedFormContext must be used inside a JsonSchemaFormRenderer."
+    );
+  }
+  return ctx;
+}
+
+// src/templates/DefaultObjectContainerTemplate.tsx
+import { useState as useState6 } from "react";
+import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2 } from "lucide-react";
+import { Card as Card2, CardContent, CardHeader, CardTitle } from "@petrarca/sonnet-ui";
+import {
+  Collapsible as Collapsible2,
+  CollapsibleContent as CollapsibleContent2,
+  CollapsibleTrigger
+} from "@petrarca/sonnet-ui";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+function CardVariant({
+  children,
+  label,
+  description
+}) {
+  return /* @__PURE__ */ jsxs13(Card2, { children: [
+    label && /* @__PURE__ */ jsxs13(CardHeader, { className: "pb-3", children: [
+      /* @__PURE__ */ jsx20(CardTitle, { className: "text-base", children: label }),
+      description && /* @__PURE__ */ jsx20("p", { className: "text-sm text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx20(CardContent, { children })
+  ] });
+}
+function SectionVariant({
+  children,
+  label,
+  description
+}) {
+  return /* @__PURE__ */ jsxs13("div", { className: "space-y-3", children: [
+    label && /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx20("h4", { className: "text-sm font-medium", children: label }),
+      description && /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground", children: description })
+    ] }),
+    /* @__PURE__ */ jsx20("div", { className: "pl-3 border-l-2 border-muted", children })
+  ] });
+}
+function DefaultObjectContainerTemplate({
+  children,
+  label,
+  description,
+  variant = "section",
+  defaultOpen = true
+}) {
+  switch (variant) {
+    case "card":
+      return /* @__PURE__ */ jsx20(CardVariant, { label, description, children });
+    case "collapsible":
+      if (!label) return /* @__PURE__ */ jsx20(SectionVariant, { children });
+      return /* @__PURE__ */ jsx20(
+        CollapsibleVariant,
+        {
+          label,
+          description,
+          defaultOpen,
+          children
+        }
+      );
+    case "inline":
+      return /* @__PURE__ */ jsx20("div", { children });
+    case "borderless":
+      return /* @__PURE__ */ jsx20("div", { className: "space-y-4", children });
+    case "section":
+    default:
+      return /* @__PURE__ */ jsx20(SectionVariant, { label, description, children });
+  }
+}
+function CollapsibleVariant({
+  label,
+  description,
+  defaultOpen,
+  children
+}) {
+  const [open, setOpen] = useState6(defaultOpen);
+  return /* @__PURE__ */ jsxs13(Collapsible2, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx20(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs13(
+      "button",
+      {
+        type: "button",
+        className: "flex w-full items-center gap-2 text-sm font-medium hover:text-foreground/80",
+        children: [
+          open ? /* @__PURE__ */ jsx20(ChevronDown2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx20(ChevronRight2, { className: "h-4 w-4" }),
+          label
+        ]
+      }
+    ) }),
+    description && /* @__PURE__ */ jsx20("p", { className: "text-xs text-muted-foreground ml-6", children: description }),
+    /* @__PURE__ */ jsx20(CollapsibleContent2, { className: "mt-2 pl-3 border-l-2 border-muted", children })
+  ] });
+}
+
+// src/widgets/ObjectWidget.tsx
+import { Fragment as Fragment3, jsx as jsx21 } from "react/jsx-runtime";
+function buildSubSchema(prop) {
+  const properties = prop.properties;
+  if (!properties) return null;
+  return {
+    title: prop.title || "",
+    type: "object",
+    properties,
+    required: prop.required,
+    ...prop.allOf ? { allOf: prop.allOf } : {},
+    ...prop.if ? { if: prop.if } : {},
+    ...prop.then ? { then: prop.then } : {},
+    ...prop.else ? { else: prop.else } : {},
+    ...prop["x-ui-order"] ? { "x-ui-order": prop["x-ui-order"] } : {}
+  };
+}
+function buildEffectiveUiSchema(subUiSchema, globalOptions, layout) {
+  return {
+    ...subUiSchema,
+    ...globalOptions ? { "x-ui-globalOptions": globalOptions } : {},
+    ...layout ? { "x-ui-layout": layout } : {}
+  };
+}
+function resolveObjectOptions(options) {
+  return {
+    variant: options?.variant || "section",
+    defaultOpen: options?.defaultOpen !== false,
+    displayContents: options?.displayContents ?? false,
+    globalOptions: options?.globalOptions
+  };
+}
+function resolveLayout(uiSchema, propertySchema) {
+  return uiSchema?.["x-ui-layout"] ?? propertySchema["x-ui-layout"];
+}
+function ObjectWidget({
+  propertySchema,
+  value,
+  onChange,
+  registry,
+  uiSchema,
+  disabled,
+  readonly,
+  label,
+  description,
+  options
+}) {
+  const { renderer: Renderer, templates } = useNestedFormContext();
+  const ContainerTemplate = templates.ObjectContainerTemplate ?? DefaultObjectContainerTemplate;
+  const subSchema = useMemo4(
+    () => buildSubSchema(propertySchema),
+    [propertySchema]
+  );
+  const subUiSchema = useMemo4(
+    () => uiSchema?.["x-ui-fields"] ?? {},
+    [uiSchema]
+  );
+  if (!subSchema) return null;
+  const { variant, defaultOpen, displayContents, globalOptions } = resolveObjectOptions(options);
+  const layout = resolveLayout(uiSchema, propertySchema);
+  const effectiveUiSchema = buildEffectiveUiSchema(
+    subUiSchema,
+    globalOptions,
+    layout
+  );
+  const content = /* @__PURE__ */ jsx21(
+    Renderer,
+    {
+      schema: subSchema,
+      data: value || {},
+      onChange,
+      disabled,
+      readOnly: readonly,
+      widgets: registry,
+      uiSchema: effectiveUiSchema,
+      displayContents
+    }
+  );
+  if (displayContents) return /* @__PURE__ */ jsx21(Fragment3, { children: content });
+  return /* @__PURE__ */ jsx21(
+    ContainerTemplate,
+    {
+      label,
+      description,
+      variant,
+      defaultOpen,
+      children: content
+    }
+  );
+}
+
+// src/widgets/ArrayWidget.tsx
+import { useCallback as useCallback5, useMemo as useMemo5 } from "react";
+import { Plus } 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";
+
+// src/templates/DefaultArrayItemTemplate.tsx
+import { Trash2, ChevronUp, ChevronDown as ChevronDown3 } from "lucide-react";
+import { Button as Button4 } from "@petrarca/sonnet-ui";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+function DefaultArrayItemTemplate({
+  children,
+  index,
+  total,
+  canRemove,
+  orderable,
+  disabled,
+  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" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/templates/gridUtils.ts
+function buildGridTemplate(layout, canRemove, fieldCount, orderable = false) {
+  const base = layout.columns ?? `repeat(${fieldCount}, 1fr)`;
+  const withOrder = orderable ? `${base} 32px` : base;
+  return canRemove ? `${withOrder} 32px` : withOrder;
+}
+
+// src/templates/DefaultArrayHeaderTemplate.tsx
+import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+function DefaultArrayHeaderTemplate({
+  itemSchema,
+  layout,
+  canRemove,
+  orderable,
+  fieldCount
+}) {
+  if (layout.direction !== "horizontal") return null;
+  const template = buildGridTemplate(layout, canRemove, fieldCount, orderable);
+  const gap = layout.gap ?? 8;
+  const properties = itemSchema.properties ?? {};
+  const order = itemSchema["x-ui-order"];
+  const fieldNames = order ? order.filter((k) => k in properties) : Object.keys(properties);
+  return /* @__PURE__ */ jsxs15(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: template,
+        gap: `${gap}px`
+      },
+      children: [
+        fieldNames.map((name) => /* @__PURE__ */ jsx23("span", { className: "text-xs font-medium text-muted-foreground", children: properties[name]?.title ?? name }, name)),
+        orderable && /* @__PURE__ */ jsx23("span", {}),
+        canRemove && /* @__PURE__ */ jsx23("span", {})
+      ]
+    }
+  );
+}
+
+// src/widgets/ArrayWidget.tsx
+import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+function countFields(itemSchema) {
+  return Object.keys(itemSchema.properties ?? {}).length;
+}
+function allItemsComplete(items, requiredFields) {
+  if (requiredFields.length === 0) return true;
+  return items.every(
+    (item) => requiredFields.every((field) => {
+      const v = item[field];
+      return v !== void 0 && v !== null && v !== "";
+    })
+  );
+}
+function ensureItemIds(value) {
+  return (Array.isArray(value) ? value : []).map(
+    (item) => item[FORM_ITEM_ID_FIELD] ? item : { ...item, [FORM_ITEM_ID_FIELD]: generateId() }
+  );
+}
+function stripItemId(item) {
+  return Object.fromEntries(
+    Object.entries(item).filter(([k]) => k !== FORM_ITEM_ID_FIELD)
+  );
+}
+function resolveLayout2(uiSchema, propertySchema) {
+  const schemaLayout = propertySchema["x-ui-layout"];
+  const uiLayout = uiSchema?.["x-ui-layout"];
+  return { ...schemaLayout, ...uiLayout };
+}
+function buildSubGlobalOptions(layout, isHorizontal) {
+  const compactOptions = layout.compact ? { compact: true } : void 0;
+  const labelsOption = layout.labels !== void 0 ? layout.labels : isHorizontal ? false : void 0;
+  if (!compactOptions && labelsOption !== false) return void 0;
+  return {
+    ...compactOptions ?? {},
+    ...labelsOption === false ? { label: false } : {}
+  };
+}
+function ArrayHeader({ label, description }) {
+  if (!label) return null;
+  return /* @__PURE__ */ jsxs16("div", { children: [
+    /* @__PURE__ */ jsx24("h4", { className: "text-sm font-medium", children: label }),
+    description && /* @__PURE__ */ jsx24("p", { className: "text-xs text-muted-foreground", children: description })
+  ] });
+}
+function useArrayHandlers(items, onChange, propertySchema) {
+  const handleItemChange = useCallback5(
+    (index, data) => {
+      const next = [...items];
+      next[index] = {
+        ...data,
+        [FORM_ITEM_ID_FIELD]: items[index][FORM_ITEM_ID_FIELD]
+      };
+      onChange(next);
+    },
+    [items, onChange]
+  );
+  const handleAdd = useCallback5(() => {
+    const base = propertySchema.items ? applySchemaDefaults({}, propertySchema.items) : {};
+    onChange([...items, { ...base, [FORM_ITEM_ID_FIELD]: generateId() }]);
+  }, [items, onChange, propertySchema.items]);
+  const handleRemove = useCallback5(
+    (index) => {
+      onChange(items.filter((_, i) => i !== index));
+    },
+    [items, onChange]
+  );
+  const handleMove = useCallback5(
+    (from, to) => {
+      const next = [...items];
+      const [movedItem] = next.splice(from, 1);
+      next.splice(to, 0, movedItem);
+      onChange(next);
+    },
+    [items, onChange]
+  );
+  return { handleItemChange, handleAdd, handleRemove, handleMove };
+}
+function ArrayWidget({
+  propertySchema,
+  value,
+  onChange,
+  registry,
+  uiSchema,
+  disabled,
+  readonly,
+  label,
+  description,
+  options,
+  schema,
+  name
+}) {
+  const { templates } = useNestedFormContext();
+  const items = useMemo5(() => ensureItemIds(value), [value]);
+  const { handleItemChange, handleAdd, handleRemove, handleMove } = useArrayHandlers(items, onChange, propertySchema);
+  const itemSchema = propertySchema.items;
+  if (!itemSchema?.properties) {
+    return /* @__PURE__ */ jsx24("p", { className: "text-sm text-destructive", children: 'ArrayWidget requires items with type "object" and properties.' });
+  }
+  const layout = resolveLayout2(uiSchema, propertySchema);
+  const isHorizontal = layout.direction === "horizontal";
+  const subGlobalOptions = buildSubGlobalOptions(layout, isHorizontal);
+  return /* @__PURE__ */ jsx24(
+    ArrayWidgetInner,
+    {
+      items,
+      propertySchema,
+      itemSchema,
+      schema,
+      name: name ?? "",
+      registry,
+      uiSchema,
+      disabled,
+      readonly,
+      label,
+      description,
+      options,
+      layout,
+      isHorizontal,
+      subGlobalOptions,
+      templates,
+      onItemChange: handleItemChange,
+      onAdd: handleAdd,
+      onRemove: handleRemove,
+      onMove: handleMove
+    }
+  );
+}
+function resolveConstraints(arraySchema, itemSchema, readonly, disabled, itemCount) {
+  const minItems = arraySchema.minItems ?? 0;
+  const maxItems = arraySchema.maxItems ?? Infinity;
+  const requiredFields = itemSchema.required ?? [];
+  const isEditable = !readonly && !disabled;
+  return {
+    canRemove: isEditable && itemCount > minItems,
+    canAddBase: isEditable && itemCount < maxItems,
+    requiredFields
+  };
+}
+function resolveDisplayOptions(options, itemCount) {
+  return {
+    addLabel: options?.addLabel ?? "Add item",
+    itemTitle: options?.itemTitle,
+    orderable: !!options?.orderable && itemCount > 1,
+    emptyMessage: options?.emptyMessage
+  };
+}
+function resolveTemplates(templates, isHorizontal) {
+  const ItemTemplate = templates.ArrayItemTemplate ?? DefaultArrayItemTemplate;
+  const HorizontalItemTemplate = templates.HorizontalArrayItemTemplate ?? void 0;
+  const HeaderTemplate = templates.ArrayHeaderTemplate ?? DefaultArrayHeaderTemplate;
+  const ActiveItemTemplate = isHorizontal && HorizontalItemTemplate ? HorizontalItemTemplate : ItemTemplate;
+  return { ActiveItemTemplate, HeaderTemplate };
+}
+function buildItemOptions(isHorizontal, subGlobalOptions) {
+  return {
+    variant: "borderless",
+    displayContents: isHorizontal,
+    ...subGlobalOptions ? { globalOptions: subGlobalOptions } : {}
+  };
+}
+function resolveItemLabel(itemTitle, index) {
+  return itemTitle ? itemTitle.replace("{index}", String(index + 1)) : "";
+}
+function ArrayWidgetInner({
+  items,
+  propertySchema,
+  itemSchema,
+  schema,
+  name,
+  registry,
+  uiSchema,
+  disabled,
+  readonly,
+  label,
+  description,
+  options,
+  layout,
+  isHorizontal,
+  subGlobalOptions,
+  templates,
+  onItemChange,
+  onAdd,
+  onRemove,
+  onMove
+}) {
+  const constraints = resolveConstraints(
+    propertySchema,
+    itemSchema,
+    readonly,
+    disabled,
+    items.length
+  );
+  const display = resolveDisplayOptions(options, items.length);
+  const canAdd = constraints.canAddBase && allItemsComplete(items, constraints.requiredFields);
+  const { ActiveItemTemplate, HeaderTemplate } = resolveTemplates(
+    templates,
+    isHorizontal
+  );
+  const fieldCount = countFields(itemSchema);
+  const itemOptions = buildItemOptions(isHorizontal, subGlobalOptions);
+  return /* @__PURE__ */ jsxs16("div", { className: isHorizontal ? "space-y-1" : "space-y-3", children: [
+    /* @__PURE__ */ jsx24(ArrayHeader, { label, description }),
+    items.length === 0 && display.emptyMessage && /* @__PURE__ */ jsx24("p", { className: "text-sm text-muted-foreground italic", children: display.emptyMessage }),
+    items.length > 0 && /* @__PURE__ */ jsx24(
+      HeaderTemplate,
+      {
+        itemSchema,
+        layout,
+        canRemove: constraints.canRemove,
+        orderable: display.orderable,
+        fieldCount
+      }
+    ),
+    items.map((item, index) => /* @__PURE__ */ jsx24(
+      ActiveItemTemplate,
+      {
+        index,
+        total: items.length,
+        canRemove: constraints.canRemove,
+        orderable: display.orderable,
+        disabled,
+        layout,
+        fieldCount,
+        onRemove: () => onRemove(index),
+        onMoveUp: index > 0 ? () => onMove(index, index - 1) : void 0,
+        onMoveDown: index < items.length - 1 ? () => onMove(index, index + 1) : void 0,
+        children: /* @__PURE__ */ jsx24(
+          ObjectWidget,
+          {
+            id: `field-${name}-${index}`,
+            name: `${name}[${index}]`,
+            schema,
+            propertySchema: itemSchema,
+            uiSchema,
+            registry,
+            value: stripItemId(item),
+            onChange: (data) => onItemChange(index, data),
+            label: resolveItemLabel(display.itemTitle, index),
+            description: void 0,
+            disabled,
+            readonly,
+            options: itemOptions
+          }
+        )
+      },
+      item[FORM_ITEM_ID_FIELD]
+    )),
+    canAdd && /* @__PURE__ */ jsxs16(
+      Button5,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: onAdd,
+        disabled,
+        className: "gap-1.5",
+        children: [
+          /* @__PURE__ */ jsx24(Plus, { className: "h-3.5 w-3.5" }),
+          display.addLabel
+        ]
+      }
+    )
+  ] });
+}
+
+// src/widgets/QuantityWidget.tsx
+import { useCallback as useCallback6, useRef as useRef4 } from "react";
+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 QuantityWidget({
+  id,
+  name,
+  value,
+  onChange,
+  onBlur,
+  propertySchema,
+  required,
+  disabled,
+  readonly,
+  rawErrors,
+  label,
+  description,
+  placeholder,
+  autofocus,
+  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 quantityValue = value != null && typeof value === "object" && !Array.isArray(value) ? value : void 0;
+  const valueRef = useRef4(value);
+  valueRef.current = value;
+  const handleBlur = useCallback6(() => {
+    onBlur?.(id, valueRef.current);
+  }, [id, onBlur]);
+  return /* @__PURE__ */ jsx25(
+    FormQuantityInput,
+    {
+      id,
+      name,
+      value: quantityValue,
+      onChange,
+      onBlur: handleBlur,
+      units,
+      unitPosition: unitPositionOpt,
+      precision,
+      step,
+      min: propertySchema.minimum,
+      max: propertySchema.maximum,
+      label,
+      description,
+      error,
+      placeholder,
+      required,
+      disabled,
+      readOnly: readonly,
+      autoFocus: autofocus
+    }
+  );
+}
+
+// src/widgets/widgetResolver.ts
+import {
+  isNullableBoolean as isNullableBoolean2,
+  extractEnumValues as extractEnumValues2,
+  getFieldType
+} from "@petrarca/sonnet-core/schema";
+var DEFAULT_WIDGET_MAP = {
+  string: {
+    default: "TextInputWidget",
+    textarea: "TextareaWidget",
+    email: "TextInputWidget",
+    // Uses email input type
+    uri: "TextInputWidget",
+    // Uses url input type
+    url: "TextInputWidget"
+    // Uses url input type
+  },
+  number: {
+    default: "NumberWidget"
+  },
+  integer: {
+    default: "NumberWidget"
+    // NumberWidget handles both number and integer
+  },
+  boolean: {
+    default: "CheckboxWidget"
+  }
+};
+function resolveWidgetByName(widgetName, propertySchema, registry) {
+  if (registry[widgetName]) {
+    return registry[widgetName];
+  }
+  const type = getFieldType(propertySchema);
+  const resolvedWidgetName = DEFAULT_WIDGET_MAP[type]?.[widgetName.toLowerCase()];
+  if (resolvedWidgetName && registry[resolvedWidgetName]) {
+    return registry[resolvedWidgetName];
+  }
+  return null;
+}
+function mergeUiSchema(propertySchema, uiSchema) {
+  const xWidgetName = propertySchema["x-ui-widget"];
+  const xWidgetOptions = propertySchema["x-ui-options"];
+  if (!xWidgetName && !xWidgetOptions) return uiSchema;
+  if (!uiSchema) {
+    return {
+      ...xWidgetName && { "x-ui-widget": xWidgetName },
+      ...xWidgetOptions && { "x-ui-options": xWidgetOptions }
+    };
+  }
+  return {
+    ...xWidgetName && { "x-ui-widget": xWidgetName },
+    // lower priority
+    ...uiSchema,
+    // higher priority
+    "x-ui-options": {
+      ...xWidgetOptions || {},
+      // lower priority
+      ...uiSchema["x-ui-options"] || {}
+      // higher priority
+    }
+  };
+}
+function resolveFromUiWidget(uiWidget, propertySchema, registry) {
+  if (typeof uiWidget === "function") return uiWidget;
+  if (typeof uiWidget === "string")
+    return resolveWidgetByName(uiWidget, propertySchema, registry);
+  return null;
+}
+function isObjectArraySchema(schema) {
+  return schema.type === "array" && schema.items?.type === "object" && !!schema.items?.properties;
+}
+function registryLookup(registry, widgetName) {
+  return registry[widgetName] || registry["TextInputWidget"];
+}
+function resolveFromSchemaStructure(schema, registry) {
+  if (isNullableBoolean2(schema))
+    return registryLookup(registry, "CheckboxWidget");
+  if (extractEnumValues2(schema).length > 0)
+    return registryLookup(registry, "SelectWidget");
+  if (schema.type === "object" && schema.properties)
+    return registryLookup(registry, "ObjectWidget");
+  if (isObjectArraySchema(schema))
+    return registryLookup(registry, "ArrayWidget");
+  return null;
+}
+function resolveFromTypeFormat(schema, registry) {
+  const type = getFieldType(schema);
+  const format = schema.format;
+  const widgetName = format && DEFAULT_WIDGET_MAP[type]?.[format] || DEFAULT_WIDGET_MAP[type]?.default || "TextInputWidget";
+  return registry[widgetName] || registry["TextInputWidget"];
+}
+function resolveWidget(propertySchema, uiSchema, registry) {
+  const effectiveUiSchema = mergeUiSchema(propertySchema, uiSchema);
+  const uiWidget = effectiveUiSchema?.["x-ui-widget"];
+  if (uiWidget) {
+    const resolved = resolveFromUiWidget(uiWidget, propertySchema, registry);
+    if (resolved) return resolved;
+  }
+  return resolveFromSchemaStructure(propertySchema, registry) ?? resolveFromTypeFormat(propertySchema, registry);
+}
+function getDefaultWidgetForType(type) {
+  return DEFAULT_WIDGET_MAP[type]?.default || "TextInputWidget";
+}
+
+// src/widgets/index.ts
+var DEFAULT_WIDGETS = {
+  // Canonical PascalCase names
+  TextInputWidget,
+  TextareaWidget,
+  NumberWidget,
+  CheckboxWidget,
+  SelectWidget,
+  TagsInputWidget,
+  JsonEditorWidget,
+  EntitySelectWidget,
+  ObjectWidget,
+  ArrayWidget,
+  QuantityWidget,
+  // Lowercase aliases for x-ui-widget convenience
+  text: TextInputWidget,
+  textarea: TextareaWidget,
+  number: NumberWidget,
+  checkbox: CheckboxWidget,
+  select: SelectWidget,
+  tags: TagsInputWidget,
+  "json-editor": JsonEditorWidget,
+  "entity-select": EntitySelectWidget,
+  object: ObjectWidget,
+  array: ArrayWidget,
+  quantity: QuantityWidget
+};
+
+// 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";
+function HorizontalArrayItemTemplate({
+  children,
+  index,
+  total,
+  canRemove,
+  orderable,
+  disabled,
+  layout,
+  fieldCount,
+  onRemove,
+  onMoveUp,
+  onMoveDown
+}) {
+  const resolvedLayout = layout;
+  const template = buildGridTemplate(
+    resolvedLayout,
+    canRemove,
+    fieldCount,
+    orderable
+  );
+  const gap = resolvedLayout.gap ?? 8;
+  const alignItems = resolvedLayout.compact ? "center" : "start";
+  return /* @__PURE__ */ jsxs17(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: template,
+        gap: `${gap}px`,
+        alignItems
+      },
+      children: [
+        children,
+        orderable && /* @__PURE__ */ jsxs17("div", { className: "flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ jsx26(
+            Button6,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "compact",
+              disabled: disabled || index === 0,
+              onClick: onMoveUp,
+              title: "Move up",
+              className: "h-4 w-8 p-0",
+              children: /* @__PURE__ */ jsx26(ChevronUp2, { className: "h-3 w-3" })
+            }
+          ),
+          /* @__PURE__ */ jsx26(
+            Button6,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "compact",
+              disabled: disabled || index >= total - 1,
+              onClick: onMoveDown,
+              title: "Move down",
+              className: "h-4 w-8 p-0",
+              children: /* @__PURE__ */ jsx26(ChevronDown4, { className: "h-3 w-3" })
+            }
+          )
+        ] }),
+        canRemove && /* @__PURE__ */ jsx26(
+          Button6,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "compact",
+            disabled,
+            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" })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/templates/index.ts
+var DEFAULT_TEMPLATES = {
+  ArrayItemTemplate: DefaultArrayItemTemplate,
+  HorizontalArrayItemTemplate,
+  ArrayHeaderTemplate: DefaultArrayHeaderTemplate,
+  ObjectContainerTemplate: DefaultObjectContainerTemplate
+};
+
+// src/FormFieldRenderer.tsx
+import {
+  getFieldTitle,
+  getFieldHelpText,
+  getFieldPlaceholder
+} from "@petrarca/sonnet-core/schema";
+import { jsx as jsx27 } from "react/jsx-runtime";
+function mergeFieldOptions(globalOptions, property, uiSchema) {
+  const xWidgetOptions = property["x-ui-options"] || {};
+  const fieldOptions = uiSchema?.["x-ui-options"] || {};
+  return { ...globalOptions, ...xWidgetOptions, ...fieldOptions };
+}
+function resolveEffectiveLabel(label, uiTitle, globalLabelOption) {
+  if (globalLabelOption === false) return "";
+  if (typeof uiTitle === "string") return uiTitle;
+  if (uiTitle === false) return "";
+  return label;
+}
+function resolveFieldFlags(fieldOptions, globalOptions, disabled, readOnly) {
+  return {
+    disabled: fieldOptions.disabled ?? globalOptions.disabled ?? disabled,
+    readOnly: fieldOptions.readonly ?? globalOptions.readonly ?? readOnly
+  };
+}
+function FormFieldRenderer({
+  fieldName,
+  property,
+  value,
+  onChange,
+  onBlur,
+  required,
+  disabled,
+  readOnly,
+  schema,
+  uiSchema,
+  registry,
+  globalOptions = {},
+  formData
+}) {
+  const label = getFieldTitle(fieldName, property);
+  const description = uiSchema?.["x-ui-description"] ?? getFieldHelpText(property);
+  const placeholder = uiSchema?.["x-ui-placeholder"] ?? getFieldPlaceholder(property);
+  const Widget = resolveWidget(property, uiSchema, registry);
+  const mergedOptions = mergeFieldOptions(globalOptions, property, uiSchema);
+  if (mergedOptions.hidden) return null;
+  const fieldOptions = uiSchema?.["x-ui-options"] || {};
+  const flags = resolveFieldFlags(
+    fieldOptions,
+    globalOptions,
+    disabled,
+    readOnly
+  );
+  const effectiveLabel = resolveEffectiveLabel(
+    label,
+    uiSchema?.["x-ui-title"],
+    globalOptions.label
+  );
+  return /* @__PURE__ */ jsx27(
+    Widget,
+    {
+      id: `field-${fieldName}`,
+      name: fieldName,
+      value,
+      onChange,
+      onBlur,
+      schema,
+      propertySchema: property,
+      uiSchema,
+      registry,
+      label: effectiveLabel,
+      description,
+      placeholder,
+      required,
+      disabled: flags.disabled,
+      readonly: flags.readOnly,
+      options: mergedOptions,
+      formData
+    }
+  );
+}
+
+// src/hooks/useFormEngine.ts
+import { useState as useState7, useEffect as useEffect3, useMemo as useMemo6, useCallback as useCallback7, useRef as useRef5 } from "react";
+import { isEqual } from "@petrarca/sonnet-core";
+import {
+  getSchemaProperties,
+  getFieldDefault,
+  applySchemaDefaults as applySchemaDefaults2,
+  resolveSchema,
+  resolveRefs,
+  validateFormData,
+  diffFormData
+} from "@petrarca/sonnet-core/schema";
+
+// src/hooks/orderProperties.ts
+function orderProperties(properties, orderArray) {
+  const allEntries = Object.entries(properties);
+  if (!orderArray || orderArray.length === 0) return allEntries;
+  const orderSet = new Set(orderArray);
+  const map = new Map(allEntries);
+  const ordered = [];
+  for (const name of orderArray) {
+    const prop = map.get(name);
+    if (prop) ordered.push([name, prop]);
+  }
+  const unordered = allEntries.filter(([name]) => !orderSet.has(name));
+  return [...ordered, ...unordered];
+}
+
+// src/hooks/useFormEngine.ts
+function isImmediateField(fieldName, properties) {
+  const property = properties[fieldName];
+  return property?.type === "boolean" || property?.enum !== void 0;
+}
+function computeBaselineUpdate(newData, originalData, initialized, schemaPropertyNames) {
+  const newCount = Object.keys(newData).length;
+  const origCount = Object.keys(originalData).length;
+  if (!initialized && newCount > 0) {
+    const cleanedData = Object.fromEntries(
+      Object.entries(newData).filter(([k]) => schemaPropertyNames.includes(k))
+    );
+    const nonSchema = Object.fromEntries(
+      Object.entries(newData).filter(([k]) => !schemaPropertyNames.includes(k))
+    );
+    return { shouldMarkInitialized: true, cleanedData, nonSchema };
+  }
+  if (initialized && newCount > origCount) {
+    const cleanedData = Object.fromEntries(
+      Object.entries(newData).filter(([k]) => schemaPropertyNames.includes(k))
+    );
+    const nonSchema = Object.fromEntries(
+      Object.entries(newData).filter(([k]) => !schemaPropertyNames.includes(k))
+    );
+    return { shouldMarkInitialized: false, cleanedData, nonSchema };
+  }
+  return null;
+}
+function useFormEngine({
+  schema,
+  data,
+  uiSchema,
+  onChange,
+  onBlur,
+  onValidationChange,
+  onUpdate,
+  onCancel,
+  readOnly = false,
+  showActions = false,
+  deferChanges = false,
+  deferStateUpdates = false
+}) {
+  const refResolvedSchema = useMemo6(() => resolveRefs(schema), [schema]);
+  const [originalData, setOriginalData] = useState7(
+    () => applySchemaDefaults2(data, refResolvedSchema)
+  );
+  const [originalDataInitialized, setOriginalDataInitialized] = useState7(false);
+  const [nonSchemaData, setNonSchemaData] = useState7(
+    () => {
+      const props = getSchemaProperties(refResolvedSchema);
+      const names = Object.keys(props);
+      return Object.fromEntries(
+        Object.entries(data).filter(([k]) => !names.includes(k))
+      );
+    }
+  );
+  const [formData, setFormData] = useState7(
+    () => applySchemaDefaults2(data, refResolvedSchema)
+  );
+  const [pendingChanges, setPendingChanges] = useState7({});
+  const resolvedSchema = useMemo6(
+    () => resolveSchema(refResolvedSchema, formData),
+    [refResolvedSchema, formData]
+  );
+  const orderedProperties = useMemo6(() => {
+    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 properties = getSchemaProperties(resolvedSchema);
+  useEffect3(() => {
+    if (!initialDefaultsSent) {
+      const hasDefaults = Object.entries(properties).some(
+        ([fieldName, property]) => data[fieldName] === void 0 && getFieldDefault(property) !== void 0
+      );
+      if (hasDefaults && onChange) {
+        onChange(formData);
+      }
+      setInitialDefaultsSent(true);
+    }
+  }, [initialDefaultsSent, properties, data, formData, onChange]);
+  useEffect3(() => {
+    const currentPropertyNames = Object.keys(properties);
+    const keysToRemove = Object.keys(formData).filter(
+      (k) => !currentPropertyNames.includes(k)
+    );
+    if (keysToRemove.length > 0) {
+      const cleanedData = { ...formData };
+      keysToRemove.forEach((k) => {
+        delete cleanedData[k];
+      });
+      setFormData(cleanedData);
+      if (onChange) onChange(cleanedData);
+    }
+  }, [properties, formData, onChange]);
+  const prevDataRef = useRef5(data);
+  useEffect3(() => {
+    if (isEqual(prevDataRef.current, data)) return;
+    prevDataRef.current = data;
+    const newData = applySchemaDefaults2(data, refResolvedSchema);
+    setFormData(newData);
+    const schemaPropertyNames = Object.keys(properties);
+    const result = computeBaselineUpdate(
+      newData,
+      originalData,
+      originalDataInitialized,
+      schemaPropertyNames
+    );
+    if (result) {
+      setOriginalData(result.cleanedData);
+      setNonSchemaData(result.nonSchema);
+      if (result.shouldMarkInitialized) {
+        setOriginalDataInitialized(true);
+      }
+    }
+    const validation = validateFormData(resolvedSchema, newData);
+    setIsValid(validation.isValid);
+  }, [
+    data,
+    refResolvedSchema,
+    resolvedSchema,
+    properties,
+    originalData,
+    originalDataInitialized
+  ]);
+  const hasChanges = useMemo6(
+    () => !isEqual(formData, originalData),
+    [formData, originalData]
+  );
+  const displayData = useMemo6(() => {
+    if (deferStateUpdates && Object.keys(pendingChanges).length > 0) {
+      return { ...formData, ...pendingChanges };
+    }
+    return formData;
+  }, [formData, pendingChanges, deferStateUpdates]);
+  const handleFieldChange = useCallback7(
+    (fieldName, value) => {
+      if (readOnly) return;
+      const immediate = isImmediateField(fieldName, properties);
+      if (showActions && deferStateUpdates && !immediate) {
+        setPendingChanges((prev) => ({ ...prev, [fieldName]: value }));
+        return;
+      }
+      const newData = { ...formData, [fieldName]: value };
+      setFormData(newData);
+      if (!showActions) {
+        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,
+      formData,
+      deferChanges,
+      deferStateUpdates,
+      showActions,
+      onChange,
+      resolvedSchema,
+      onValidationChange,
+      properties
+    ]
+  );
+  const flushPendingField = useCallback7(
+    (fieldName) => {
+      if (!showActions || !deferStateUpdates) return;
+      if (pendingChanges[fieldName] === void 0) return;
+      const newData = { ...formData, ...pendingChanges };
+      setFormData(newData);
+      setPendingChanges((prev) => {
+        const updated = { ...prev };
+        delete updated[fieldName];
+        return updated;
+      });
+      const validation = validateFormData(resolvedSchema, newData);
+      setIsValid(validation.isValid);
+      if (onValidationChange) {
+        onValidationChange(validation.errors, validation.isValid);
+      }
+    },
+    [
+      showActions,
+      deferStateUpdates,
+      pendingChanges,
+      formData,
+      resolvedSchema,
+      onValidationChange
+    ]
+  );
+  const handleFieldBlur = useCallback7(
+    (fieldName) => {
+      if (readOnly) return;
+      flushPendingField(fieldName);
+      if (!showActions && deferChanges && onChange) {
+        onChange(formData);
+      }
+      if (onBlur) {
+        const hasPending = deferStateUpdates && pendingChanges[fieldName] !== void 0;
+        const dataToPass = hasPending ? { ...formData, [fieldName]: pendingChanges[fieldName] } : formData;
+        onBlur(fieldName, dataToPass);
+      }
+    },
+    [
+      readOnly,
+      formData,
+      pendingChanges,
+      deferChanges,
+      deferStateUpdates,
+      showActions,
+      onChange,
+      onBlur,
+      flushPendingField
+    ]
+  );
+  const handleSave = useCallback7(() => {
+    if (!hasChanges) 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 changed = {};
+      for (const key of Object.keys(finalData)) {
+        if (!isEqual(finalData[key], originalData[key])) {
+          changed[key] = finalData[key];
+        }
+      }
+      const diff = diffFormData(originalData, finalData);
+      onUpdate(completeData, changed, diff);
+      setPendingChanges({});
+    }
+  }, [
+    hasChanges,
+    resolvedSchema,
+    formData,
+    originalData,
+    pendingChanges,
+    deferStateUpdates,
+    nonSchemaData,
+    onUpdate
+  ]);
+  const handleCancel = useCallback7(() => {
+    setFormData({ ...originalData });
+    setPendingChanges({});
+    onCancel?.();
+  }, [originalData, onCancel]);
+  return {
+    formData,
+    displayData,
+    resolvedSchema,
+    orderedProperties,
+    hasChanges,
+    isValid,
+    handleFieldChange,
+    handleFieldBlur,
+    handleSave,
+    handleCancel
+  };
+}
+
+// src/JsonSchemaFormRenderer.tsx
+import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
+function stripFids(data) {
+  const result = {};
+  for (const [key, value] of Object.entries(data)) {
+    if (Array.isArray(value)) {
+      result[key] = value.map((item) => {
+        if (item !== null && typeof item === "object" && !Array.isArray(item)) {
+          const rest = Object.fromEntries(
+            Object.entries(item).filter(
+              ([k]) => k !== FORM_ITEM_ID_FIELD2
+            )
+          );
+          return stripFids(rest);
+        }
+        return item;
+      });
+    } else if (value !== null && typeof value === "object") {
+      result[key] = stripFids(value);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+function resolveFlagDefaults(props) {
+  return {
+    disabled: props.disabled ?? false,
+    readOnly: props.readOnly ?? false,
+    showActions: props.showActions ?? false,
+    deferChanges: props.deferChanges ?? false,
+    deferStateUpdates: props.deferStateUpdates ?? false,
+    showCancel: props.showCancel ?? true,
+    showExtraProperties: props.showExtraProperties ?? true,
+    displayContents: props.displayContents ?? false
+  };
+}
+function resolveValueDefaults(props) {
+  return {
+    saveLabel: props.saveLabel ?? "Save",
+    cancelLabel: props.cancelLabel ?? "Cancel",
+    widgets: props.widgets ?? DEFAULT_WIDGETS,
+    uiSchema: props.uiSchema ?? {}
+  };
+}
+function useWrappedCallbacks(onChange, onBlur, onUpdate) {
+  const wrappedOnChange = useCallback8(
+    (d) => onChange?.(stripFids(d)),
+    [onChange]
+  );
+  const wrappedOnBlur = useCallback8(
+    (fieldName, d) => onBlur?.(fieldName, stripFids(d)),
+    [onBlur]
+  );
+  const wrappedOnUpdate = useCallback8(
+    (d, changed, diff) => onUpdate?.(stripFids(d), stripFids(changed), diff),
+    [onUpdate]
+  );
+  return {
+    wrappedOnChange: onChange ? wrappedOnChange : void 0,
+    wrappedOnBlur: onBlur ? wrappedOnBlur : void 0,
+    wrappedOnUpdate: onUpdate ? wrappedOnUpdate : void 0
+  };
+}
+function buildFieldMap(fields) {
+  const map = /* @__PURE__ */ new Map();
+  for (const field of fields) {
+    if (React11.isValidElement(field) && field.key != null) {
+      map.set(String(field.key), field);
+    }
+  }
+  return map;
+}
+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;
+  return {
+    element: /* @__PURE__ */ jsx28(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: gridColumns,
+          gap: `${rowGap}px`
+        },
+        children: rowFields
+      },
+      `row:${row.fields.join(",")}`
+    ),
+    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))) {
+      result.push(field);
+    }
+  }
+  return result;
+}
+function layoutFieldsInRows(fields, rowDefs, defaultRowGap) {
+  const fieldMap = buildFieldMap(fields);
+  const placed = /* @__PURE__ */ new Set();
+  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);
+  }
+  return elements.concat(collectUnplacedFields(fields, placed));
+}
+function FormContainer({
+  displayContents,
+  showExtraProperties,
+  showActions,
+  formData,
+  resolvedSchema,
+  handleSave,
+  handleCancel,
+  disabled,
+  hasChanges,
+  isValid,
+  saveLabel,
+  cancelLabel,
+  showCancel,
+  children
+}) {
+  if (displayContents) {
+    return /* @__PURE__ */ jsx28("div", { style: { display: "contents" }, children });
+  }
+  return /* @__PURE__ */ jsxs18(SimpleStack, { gap: 24, children: [
+    children,
+    showExtraProperties && /* @__PURE__ */ jsx28(ExtraPropertiesCard_default, { properties: formData, schema: resolvedSchema }),
+    showActions && /* @__PURE__ */ jsx28(
+      FormActions,
+      {
+        onSave: handleSave,
+        onCancel: handleCancel,
+        disabled,
+        hasChanges,
+        isValid,
+        saveLabel,
+        cancelLabel,
+        showCancel
+      }
+    )
+  ] });
+}
+function JsonSchemaFormRenderer(props) {
+  const {
+    schema,
+    data,
+    onChange,
+    onBlur,
+    onValidationChange,
+    onUpdate,
+    onCancel,
+    templates
+  } = props;
+  const {
+    disabled,
+    readOnly,
+    showActions,
+    deferChanges,
+    deferStateUpdates,
+    showCancel,
+    showExtraProperties,
+    displayContents
+  } = resolveFlagDefaults(props);
+  const { saveLabel, cancelLabel, widgets, uiSchema } = resolveValueDefaults(props);
+  const { wrappedOnChange, wrappedOnBlur, wrappedOnUpdate } = useWrappedCallbacks(onChange, onBlur, onUpdate);
+  const {
+    formData,
+    displayData,
+    resolvedSchema,
+    orderedProperties,
+    hasChanges,
+    isValid,
+    handleFieldChange,
+    handleFieldBlur,
+    handleSave,
+    handleCancel
+  } = useFormEngine({
+    schema,
+    data,
+    uiSchema,
+    onChange: wrappedOnChange,
+    onBlur: wrappedOnBlur,
+    onValidationChange,
+    onUpdate: wrappedOnUpdate,
+    onCancel,
+    readOnly,
+    showActions,
+    deferChanges,
+    deferStateUpdates
+  });
+  const globalOptions = uiSchema["x-ui-globalOptions"] || {};
+  const resolvedTemplates = useMemo7(
+    () => ({ ...DEFAULT_TEMPLATES, ...templates }),
+    [templates]
+  );
+  const nestedRenderer = useCallback8(
+    (props2) => /* @__PURE__ */ jsx28(
+      JsonSchemaFormRenderer,
+      {
+        ...props2,
+        templates: resolvedTemplates,
+        showActions: false,
+        showExtraProperties: false
+      }
+    ),
+    [resolvedTemplates]
+  );
+  const contextValue = useMemo7(
+    () => ({ 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),
+      disabled,
+      readOnly,
+      schema,
+      uiSchema: uiSchema[fieldName],
+      registry: widgets,
+      globalOptions,
+      formData: displayData
+    },
+    fieldName
+  ));
+  const layoutConfig = uiSchema["x-ui-layout"];
+  const rowDefs = layoutConfig?.rows;
+  const defaultRowGap = layoutConfig?.gap ?? 24;
+  const layoutFields = useMemo7(
+    () => rowDefs && rowDefs.length > 0 ? layoutFieldsInRows(fields, rowDefs, defaultRowGap) : fields,
+    [fields, rowDefs, defaultRowGap]
+  );
+  return /* @__PURE__ */ jsx28(NestedFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx28(
+    FormContainer,
+    {
+      displayContents,
+      showExtraProperties,
+      showActions,
+      formData,
+      resolvedSchema,
+      handleSave,
+      handleCancel,
+      disabled,
+      hasChanges,
+      isValid,
+      saveLabel,
+      cancelLabel,
+      showCancel,
+      children: layoutFields
+    }
+  ) });
+}
+
+// src/hooks/useResolvedSchema.ts
+import { useMemo as useMemo8 } from "react";
+import {
+  getSchemaProperties as getSchemaProperties2,
+  resolveSchema as resolveSchema2
+} from "@petrarca/sonnet-core/schema";
+function useResolvedSchema({
+  schema,
+  formData,
+  uiSchema
+}) {
+  const resolvedSchema = useMemo8(
+    () => resolveSchema2(schema, formData),
+    [schema, formData]
+  );
+  const orderedProperties = useMemo8(() => {
+    const properties = getSchemaProperties2(resolvedSchema);
+    const rawOrder = uiSchema["x-ui-order"] ?? resolvedSchema["x-ui-order"];
+    const orderArray = Array.isArray(rawOrder) ? rawOrder : void 0;
+    return orderProperties(properties, orderArray);
+  }, [resolvedSchema, uiSchema]);
+  return { resolvedSchema, orderedProperties };
+}
+export {
+  ArrayWidget,
+  CheckboxWidget,
+  DEFAULT_TEMPLATES,
+  DEFAULT_WIDGETS,
+  DEFAULT_WIDGET_MAP,
+  EntitySelectWidget,
+  ExtraPropertiesCard_default as ExtraPropertiesCard,
+  FormActions,
+  FormCheckbox,
+  FormFieldRenderer,
+  FormFieldWrapper,
+  FormInput,
+  FormMultiSelect,
+  FormNumberInput,
+  FormQuantityInput,
+  FormSelect,
+  FormTagsInput,
+  FormTextarea,
+  JsonEditorWidget,
+  JsonSchemaFormRenderer,
+  NumberWidget,
+  ObjectWidget,
+  QuantityWidget,
+  SelectWidget,
+  TagsInputWidget,
+  TextInputWidget,
+  TextareaWidget,
+  firstError,
+  getAriaDescribedBy,
+  getDefaultWidgetForType,
+  resolveWidget,
+  useFormEngine,
+  useNestedFormContext,
+  useResolvedSchema
+};
+//# sourceMappingURL=index.js.map