@petrarca/sonnet-forms 0.8.0 → 0.9.0

package/dist/index.js

@@ -446,6 +446,13 @@ import {
 import { Popover, PopoverContent, PopoverTrigger } from "@petrarca/sonnet-ui";
 
 // src/formSelectUtils.ts
+import { extractEnumValues } from "@petrarca/sonnet-core/schema";
+function buildSelectOptions(propertySchema, enumNames) {
+  return extractEnumValues(propertySchema).map((val) => {
+    const key = String(val);
+    return { value: key, label: enumNames[key] || key };
+  });
+}
 function canCreateFromSearch(allowCreate, searchQuery, options) {
   const trimmed = searchQuery.trim();
   if (!allowCreate || trimmed.length === 0) return false;
@@ -503,7 +510,7 @@ function SelectDropdown({
   searchQuery,
   onSearchChange,
   loading,
-  emptyMessage,
+  emptyMessage: emptyMessage2,
   options,
   value,
   onSelect,
@@ -521,7 +528,7 @@ function SelectDropdown({
       }
     ),
     /* @__PURE__ */ jsxs5(CommandList, { children: [
-      !showCreate && /* @__PURE__ */ jsx6(CommandEmpty, { children: loading ? "Loading..." : emptyMessage }),
+      !showCreate && /* @__PURE__ */ jsx6(CommandEmpty, { children: loading ? "Loading..." : emptyMessage2 }),
       /* @__PURE__ */ jsxs5(CommandGroup, { children: [
         options.filter(
           (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
@@ -596,7 +603,7 @@ function FormSelect(props) {
   const {
     placeholder,
     searchPlaceholder,
-    emptyMessage,
+    emptyMessage: emptyMessage2,
     clearable,
     disabled,
     readOnly,
@@ -675,7 +682,7 @@ function FormSelect(props) {
                 searchQuery,
                 onSearchChange: setSearchQuery,
                 loading,
-                emptyMessage,
+                emptyMessage: emptyMessage2,
                 options,
                 value,
                 onSelect: handleSelect,
@@ -801,7 +808,7 @@ function MultiSelectDropdown({
   searchQuery,
   onSearchChange,
   loading,
-  emptyMessage,
+  emptyMessage: emptyMessage2,
   options,
   value,
   onSelect
@@ -816,7 +823,7 @@ function MultiSelectDropdown({
       }
     ),
     /* @__PURE__ */ jsxs6(CommandList2, { children: [
-      /* @__PURE__ */ jsx7(CommandEmpty2, { children: loading ? "Loading..." : emptyMessage }),
+      /* @__PURE__ */ jsx7(CommandEmpty2, { children: loading ? "Loading..." : emptyMessage2 }),
       /* @__PURE__ */ jsx7(CommandGroup2, { children: options.filter(
         (option) => option.label.toLowerCase().includes(searchQuery.toLowerCase())
       ).map((option) => /* @__PURE__ */ jsxs6(
@@ -930,7 +937,7 @@ function FormMultiSelect(props) {
   const {
     placeholder,
     searchPlaceholder,
-    emptyMessage,
+    emptyMessage: emptyMessage2,
     clearable,
     disabled,
     readOnly,
@@ -1016,7 +1023,7 @@ function FormMultiSelect(props) {
                   searchQuery,
                   onSearchChange: setSearchQuery,
                   loading,
-                  emptyMessage,
+                  emptyMessage: emptyMessage2,
                   options,
                   value,
                   onSelect: handleSelect
@@ -1033,18 +1040,38 @@ function FormMultiSelect(props) {
 
 // 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";
+
+// src/TagBadge.tsx
+import { X as X3 } from "lucide-react";
 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 }) {
+function TagBadge({
+  tag,
+  index,
+  isDisabled,
+  onRemove,
+  onSelect
+}) {
   return /* @__PURE__ */ jsxs7(Badge2, { variant: "secondary", className: "gap-1", children: [
-    tag,
+    onSelect && !isDisabled ? /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: "outline-none hover:underline focus:underline",
+        onClick: (e) => {
+          e.stopPropagation();
+          onSelect(index);
+        },
+        children: tag
+      }
+    ) : tag,
     !isDisabled && /* @__PURE__ */ jsx8(
       "button",
       {
         type: "button",
+        "aria-label": `Remove ${tag}`,
         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") {
@@ -1065,6 +1092,9 @@ function TagBadge({ tag, index, isDisabled, onRemove }) {
     )
   ] });
 }
+
+// src/FormTagsInput.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 function useTagManagement(value, onChange, allowDuplicates, maxTags, splitKeys) {
   const [inputValue, setInputValue] = React7.useState("");
   const addTag = React7.useCallback(
@@ -1146,7 +1176,7 @@ var FormTagsInput = React7.forwardRef((props, ref) => {
   const handleContainerClick = () => {
     inputRef.current?.focus();
   };
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     FormFieldWrapper,
     {
       inputId: fieldId,
@@ -1156,7 +1186,7 @@ var FormTagsInput = React7.forwardRef((props, ref) => {
       required,
       labelPlacement,
       className: wrapperClassName,
-      children: /* @__PURE__ */ jsxs7(
+      children: /* @__PURE__ */ jsxs8(
         "div",
         {
           className: cn8(
@@ -1166,7 +1196,7 @@ var FormTagsInput = React7.forwardRef((props, ref) => {
           ),
           onClick: handleContainerClick,
           children: [
-            value.map((tag, index) => /* @__PURE__ */ jsx8(
+            value.map((tag, index) => /* @__PURE__ */ jsx9(
               TagBadge,
               {
                 tag,
@@ -1176,7 +1206,7 @@ var FormTagsInput = React7.forwardRef((props, ref) => {
               },
               index
             )),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               Input3,
               {
                 ref: inputRef,
@@ -1198,16 +1228,415 @@ var FormTagsInput = React7.forwardRef((props, ref) => {
 });
 FormTagsInput.displayName = "FormTagsInput";
 
+// src/FormKeyValueInput.tsx
+import * as React8 from "react";
+import { Plus as Plus2, X as X4 } from "lucide-react";
+import { cn as cn9 } from "@petrarca/sonnet-core";
+import { Badge as Badge3, Button as Button3, IconButton, Input as Input4 } from "@petrarca/sonnet-ui";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function usePairEditor(value, onChange) {
+  const [key, setKey] = React8.useState("");
+  const [val, setVal] = React8.useState("");
+  const [problem, setProblem] = React8.useState(null);
+  const add = () => {
+    const k = key.trim();
+    const v = val.trim();
+    if (!k || !v) {
+      setProblem(!k ? "Enter a key." : "Enter a value.");
+      return;
+    }
+    onChange?.({ ...value, [k]: v });
+    setKey("");
+    setVal("");
+    setProblem(null);
+  };
+  const remove = (k) => {
+    const { [k]: _removed, ...rest } = value;
+    onChange?.(rest);
+  };
+  const replace = (from, k, v) => {
+    const nextKey = k.trim();
+    if (!nextKey) {
+      setProblem("Enter a key.");
+      return false;
+    }
+    if (nextKey !== from && nextKey in value) {
+      setProblem(`The key '${nextKey}' is taken.`);
+      return false;
+    }
+    setProblem(null);
+    if (nextKey === from && value[from] === v) return true;
+    onChange?.(
+      Object.fromEntries(
+        Object.entries(value).map(
+          ([key0, v0]) => key0 === from ? [nextKey, v] : [key0, v0]
+        )
+      )
+    );
+    return true;
+  };
+  const edit = (k) => {
+    setKey(k);
+    setVal(value[k] ?? "");
+    setProblem(null);
+  };
+  const onKeyDown = (e) => {
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    add();
+  };
+  const typeKey = (k) => {
+    setKey(k);
+    setProblem(null);
+  };
+  const typeValue = (v) => {
+    setVal(v);
+    setProblem(null);
+  };
+  return {
+    key,
+    typeKey,
+    val,
+    typeValue,
+    problem,
+    add,
+    remove,
+    replace,
+    edit,
+    onKeyDown
+  };
+}
+function PairTags({
+  value,
+  separator,
+  isDisabled,
+  editor
+}) {
+  const keys = Object.keys(value);
+  if (keys.length === 0) return null;
+  return /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-1.5", children: keys.map((k, index) => /* @__PURE__ */ jsx10(
+    TagBadge,
+    {
+      tag: `${k}${separator}${value[k]}`,
+      index,
+      isDisabled,
+      onRemove: (i) => editor.remove(keys[i]),
+      onSelect: (i) => editor.edit(keys[i])
+    },
+    k
+  )) });
+}
+function ValueInput({
+  ariaLabel,
+  value,
+  onType,
+  onPick,
+  onBlur,
+  onKeyDown,
+  placeholder,
+  readOnly,
+  suggestions,
+  className
+}) {
+  if (!suggestions?.length)
+    return /* @__PURE__ */ jsx10(
+      Input4,
+      {
+        "aria-label": ariaLabel,
+        value,
+        onChange: (e) => onType(e.target.value),
+        onBlur,
+        onKeyDown,
+        placeholder,
+        readOnly,
+        className
+      }
+    );
+  const options = suggestions.map((s) => ({
+    value: s.value,
+    label: s.label ?? s.value
+  }));
+  if (value && !options.some((o) => o.value === value))
+    options.unshift({ value, label: value });
+  return /* @__PURE__ */ jsx10(
+    FormSelect,
+    {
+      label: ariaLabel,
+      compact: true,
+      options,
+      value: value || null,
+      onChange: (picked) => onPick(picked ?? ""),
+      allowCreate: true,
+      onCreate: onPick,
+      placeholder,
+      searchPlaceholder: "Search, or type a value",
+      readOnly,
+      wrapperClassName: className
+    }
+  );
+}
+function PairRow({
+  pairKey,
+  pairValue,
+  isDisabled,
+  editor,
+  suggestions
+}) {
+  const [key, setKey] = React8.useState(pairKey);
+  const [val, setVal] = React8.useState(pairValue);
+  React8.useEffect(() => setKey(pairKey), [pairKey]);
+  React8.useEffect(() => setVal(pairValue), [pairValue]);
+  const commit = () => {
+    if (!editor.replace(pairKey, key, val)) setKey(pairKey);
+  };
+  const onKeyDown = (e) => {
+    if (e.key !== "Enter") return;
+    e.preventDefault();
+    commit();
+  };
+  return /* @__PURE__ */ jsxs9("li", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx10(
+      Input4,
+      {
+        "aria-label": `Key of ${pairKey}`,
+        value: key,
+        onChange: (e) => setKey(e.target.value),
+        onBlur: commit,
+        onKeyDown,
+        readOnly: isDisabled,
+        className: "h-8 w-1/3 shrink-0 font-mono text-xs"
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      ValueInput,
+      {
+        ariaLabel: `Value of ${pairKey}`,
+        value: val,
+        onType: setVal,
+        onPick: (picked) => {
+          setVal(picked);
+          if (!editor.replace(pairKey, key, picked)) setVal(pairValue);
+        },
+        onBlur: commit,
+        onKeyDown,
+        readOnly: isDisabled,
+        suggestions,
+        className: "h-8 min-w-0 flex-1 font-mono text-xs"
+      }
+    ),
+    !isDisabled && /* @__PURE__ */ jsx10(
+      IconButton,
+      {
+        label: `Remove ${pairKey}`,
+        tone: "destructive",
+        onClick: () => editor.remove(pairKey),
+        children: /* @__PURE__ */ jsx10(X4, {})
+      }
+    )
+  ] });
+}
+function PairRows({
+  value,
+  isDisabled,
+  editor,
+  suggestions
+}) {
+  const keys = Object.keys(value);
+  if (keys.length === 0) return null;
+  return /* @__PURE__ */ jsx10("ul", { className: "space-y-1.5", children: keys.map((k, index) => /* @__PURE__ */ jsx10(
+    PairRow,
+    {
+      pairKey: k,
+      pairValue: value[k],
+      isDisabled,
+      editor,
+      suggestions
+    },
+    index
+  )) });
+}
+function PairKeys({
+  value
+}) {
+  const keys = Object.keys(value);
+  return /* @__PURE__ */ jsx10("div", { className: "flex flex-wrap gap-1.5", children: keys.map((k) => /* @__PURE__ */ jsx10(
+    Badge3,
+    {
+      variant: "outline",
+      className: "font-mono text-[11px] font-normal",
+      title: value[k],
+      children: k
+    },
+    k
+  )) });
+}
+function PairList({
+  display,
+  suggestions,
+  ...props
+}) {
+  return display === "rows" ? /* @__PURE__ */ jsx10(PairRows, { ...props, suggestions }) : /* @__PURE__ */ jsx10(PairTags, { ...props });
+}
+var PairFields = React8.forwardRef(
+  ({
+    id,
+    name,
+    keyPlaceholder = "Key",
+    valuePlaceholder = "Value",
+    asRow = false,
+    editor,
+    suggestions
+  }, ref) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx10(
+      Input4,
+      {
+        ref,
+        id,
+        name,
+        value: editor.key,
+        onChange: (e) => editor.typeKey(e.target.value),
+        onKeyDown: editor.onKeyDown,
+        placeholder: keyPlaceholder,
+        className: cn9("h-8", asRow && "w-1/3 shrink-0 font-mono text-xs")
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      ValueInput,
+      {
+        ariaLabel: valuePlaceholder,
+        value: editor.val,
+        onType: editor.typeValue,
+        onPick: editor.typeValue,
+        onKeyDown: editor.onKeyDown,
+        placeholder: valuePlaceholder,
+        suggestions,
+        className: cn9("h-8", asRow && "min-w-0 flex-1 font-mono text-xs")
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      Button3,
+      {
+        type: "button",
+        variant: "outline",
+        size: "compact",
+        "aria-label": "Add",
+        onClick: editor.add,
+        children: /* @__PURE__ */ jsx10(Plus2, { className: "h-4 w-4" })
+      }
+    )
+  ] })
+);
+PairFields.displayName = "PairFields";
+function PairBox({
+  isDisabled,
+  hasError,
+  children
+}) {
+  return /* @__PURE__ */ jsx10(
+    "div",
+    {
+      className: cn9(
+        "w-full space-y-2 rounded-md border border-input bg-background px-3 py-2 text-sm",
+        isDisabled && "cursor-not-allowed opacity-50",
+        hasError && "border-destructive"
+      ),
+      children
+    }
+  );
+}
+var PairEditorBox = React8.forwardRef(
+  ({
+    display,
+    value,
+    separator,
+    isDisabled,
+    hasError,
+    editor,
+    suggestions,
+    ...fields
+  }, ref) => /* @__PURE__ */ jsxs9(PairBox, { isDisabled, hasError, children: [
+    /* @__PURE__ */ jsx10(
+      PairList,
+      {
+        display,
+        value,
+        separator,
+        isDisabled,
+        editor,
+        suggestions
+      }
+    ),
+    !isDisabled && /* @__PURE__ */ jsx10(
+      PairFields,
+      {
+        ref,
+        ...fields,
+        asRow: display === "rows",
+        editor,
+        suggestions
+      }
+    )
+  ] })
+);
+PairEditorBox.displayName = "PairEditorBox";
+var FormKeyValueInput = React8.forwardRef((props, ref) => {
+  const {
+    label,
+    description,
+    error,
+    wrapperClassName,
+    labelPlacement,
+    id,
+    value = {},
+    onChange,
+    separator = ":",
+    display = "tags"
+  } = props;
+  const generatedId = React8.useId();
+  const fieldId = id ?? generatedId;
+  const editor = usePairEditor(value, onChange);
+  return /* @__PURE__ */ jsx10(
+    FormFieldWrapper,
+    {
+      inputId: fieldId,
+      label: resolveFieldLabel(label),
+      description,
+      error: error ?? editor.problem ?? void 0,
+      required: props.required ?? false,
+      labelPlacement,
+      className: wrapperClassName,
+      children: display === "keys" ? /* @__PURE__ */ jsx10(PairKeys, { value }) : /* @__PURE__ */ jsx10(
+        PairEditorBox,
+        {
+          ref,
+          display,
+          value,
+          separator,
+          isDisabled: Boolean(props.disabled || props.readOnly),
+          hasError: Boolean(error),
+          id: fieldId,
+          name: props.name,
+          keyPlaceholder: props.keyPlaceholder,
+          valuePlaceholder: props.valuePlaceholder,
+          editor,
+          suggestions: props.valueSuggestions
+        }
+      )
+    }
+  );
+});
+FormKeyValueInput.displayName = "FormKeyValueInput";
+
 // src/FormQuantityInput.tsx
-import React8, { useCallback as useCallback2, useEffect as useEffect2, useId as useId8, useMemo, useState as useState4 } from "react";
+import React9, { useCallback as useCallback2, useEffect as useEffect3, useId as useId9, useMemo, useState as useState5 } from "react";
 import { ChevronsUpDown as ChevronsUpDown3 } from "lucide-react";
-import { cn as cn9 } from "@petrarca/sonnet-core";
+import { cn as cn10 } from "@petrarca/sonnet-core";
 import {
   InputGroup,
   InputGroupAddon,
   InputGroupInput
 } from "@petrarca/sonnet-ui";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 var VALID_NUMERIC_INPUT = /^-?\d*[.,]?\d*$/;
 var INCOMPLETE_SENTINELS = /* @__PURE__ */ new Set(["", ".", "-", "-."]);
 function roundToPrecision(n, p) {
@@ -1228,7 +1657,31 @@ function roundAndFormat(numValue, precision) {
   const formatted = precision !== void 0 ? rounded.toFixed(precision) : String(rounded);
   return { rounded, formatted };
 }
-function UnitAddon({
+function FreeUnitAddon({
+  currentUnit,
+  addonAlign,
+  disabled,
+  readOnly,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx11(InputGroupAddon, { align: addonAlign, children: /* @__PURE__ */ jsx11(
+    "input",
+    {
+      value: currentUnit,
+      onChange,
+      disabled,
+      readOnly,
+      placeholder: "unit",
+      "aria-label": "Unit",
+      className: "w-16 border-0 bg-transparent px-1 text-right text-sm text-muted-foreground outline-none placeholder:text-muted-foreground/60 focus:text-foreground"
+    }
+  ) });
+}
+function UnitAddon({ units, freeUnit, ...rest }) {
+  if (units.length === 0) return freeUnit ? /* @__PURE__ */ jsx11(FreeUnitAddon, { ...rest }) : null;
+  return /* @__PURE__ */ jsx11(UnitPicker, { units, ...rest });
+}
+function UnitPicker({
   units,
   currentUnit,
   addonAlign,
@@ -1236,12 +1689,11 @@ function UnitAddon({
   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__ */ jsx11(InputGroupAddon, { align: addonAlign, children: /* @__PURE__ */ jsx11("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(
+  return /* @__PURE__ */ jsx11(InputGroupAddon, { align: addonAlign, children: /* @__PURE__ */ jsxs10("div", { className: "relative flex items-center", children: [
+    /* @__PURE__ */ jsx11(
       "select",
       {
         value: currentUnit,
@@ -1249,15 +1701,16 @@ function UnitAddon({
         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))
+        children: units.map((u) => /* @__PURE__ */ jsx11("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" })
+    /* @__PURE__ */ jsx11(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 (units.length === 0) return preferred ?? "";
     if (preferred && units.some((u) => u.value === preferred)) return preferred;
     return units[0]?.value ?? "";
   }, [value?.unit, units]);
@@ -1272,11 +1725,11 @@ function useUnitState(value, units, unitPosition, min, max) {
   return { currentUnit, effectiveMin, effectiveMax, addonAlign };
 }
 function useQuantityInput(value, onChange, onBlur, currentUnit, precision, effectiveMin, effectiveMax, externalError) {
-  const [rawInput, setRawInput] = useState4(
+  const [rawInput, setRawInput] = useState5(
     value?.value !== void 0 ? String(value.value) : ""
   );
-  const [validationError, setValidationError] = useState4("");
-  useEffect2(() => {
+  const [validationError, setValidationError] = useState5("");
+  useEffect3(() => {
     const external = value?.value !== void 0 ? String(value.value) : "";
     setRawInput((prev) => {
       const parsed = parseFloat(prev.replace(",", "."));
@@ -1341,7 +1794,7 @@ function useQuantityInput(value, onChange, onBlur, currentUnit, precision, effec
     setValidationError
   };
 }
-var FormQuantityInput = React8.forwardRef((allProps, ref) => {
+var FormQuantityInput = React9.forwardRef((allProps, ref) => {
   const {
     value,
     onChange,
@@ -1360,12 +1813,13 @@ var FormQuantityInput = React8.forwardRef((allProps, ref) => {
     wrapperClassName,
     labelPlacement,
     className,
-    name
+    name,
+    freeUnit
   } = allProps;
   const units = useMemo(() => allProps.units ?? [], [allProps.units]);
   const unitPosition = allProps.unitPosition ?? "suffix";
   const error = allProps.error;
-  const generatedId = useId8();
+  const generatedId = useId9();
   const inputId = allProps.id ?? generatedId;
   const { currentUnit, effectiveMin, effectiveMax, addonAlign } = useUnitState(
     value,
@@ -1397,7 +1851,7 @@ var FormQuantityInput = React8.forwardRef((allProps, ref) => {
       setValidationError("");
       const normalized = rawInput.replace(",", ".");
       const numValue = parseFloat(normalized);
-      if (isNaN(numValue)) return;
+      if (isNaN(numValue)) return emit(void 0, unitValue);
       const um = units.find((u) => u.value === unitValue);
       const lo = um?.min ?? min;
       const hi = um?.max ?? max;
@@ -1407,10 +1861,11 @@ var FormQuantityInput = React8.forwardRef((allProps, ref) => {
     [rawInput, units, min, max, emit, setValidationError]
   );
   const unitAddon = useMemo(
-    () => /* @__PURE__ */ jsx9(
+    () => /* @__PURE__ */ jsx11(
       UnitAddon,
       {
         units,
+        freeUnit,
         currentUnit,
         addonAlign,
         disabled,
@@ -1418,9 +1873,17 @@ var FormQuantityInput = React8.forwardRef((allProps, ref) => {
         onChange: handleUnitChange
       }
     ),
-    [units, currentUnit, addonAlign, disabled, readOnly, handleUnitChange]
+    [
+      units,
+      freeUnit,
+      currentUnit,
+      addonAlign,
+      disabled,
+      readOnly,
+      handleUnitChange
+    ]
   );
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     FormFieldWrapper,
     {
       inputId,
@@ -1430,13 +1893,13 @@ var FormQuantityInput = React8.forwardRef((allProps, ref) => {
       required,
       labelPlacement,
       className: wrapperClassName,
-      children: /* @__PURE__ */ jsxs8(
+      children: /* @__PURE__ */ jsxs10(
         InputGroup,
         {
           "data-disabled": disabled || void 0,
-          className: cn9(resolvedError && "border-destructive"),
+          className: cn10(resolvedError && "border-destructive"),
           children: [
-            /* @__PURE__ */ jsx9(
+            /* @__PURE__ */ jsx11(
               InputGroupInput,
               {
                 id: inputId,
@@ -1474,9 +1937,9 @@ var FormQuantityInput = React8.forwardRef((allProps, ref) => {
 FormQuantityInput.displayName = "FormQuantityInput";
 
 // src/FormActions.tsx
-import { Button as Button3 } from "@petrarca/sonnet-ui";
+import { Button as Button4 } from "@petrarca/sonnet-ui";
 import { SimpleGroup } from "@petrarca/sonnet-ui";
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 function isSaveDisabled(args) {
   if (args.disabled || !args.hasChanges || args.isValidating) return true;
   return args.saveWhenInvalid === "disable" && !args.isValid;
@@ -1502,11 +1965,11 @@ function FormActions({
     saveWhenInvalid
   });
   const keepFocus = (e) => e.preventDefault();
-  return /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between mt-4", children: [
-    /* @__PURE__ */ jsx10("div", { className: "flex items-center gap-2", children: leadingActions }),
-    /* @__PURE__ */ jsxs9(SimpleGroup, { justify: "flex-end", children: [
-      showCancel && /* @__PURE__ */ jsx10(
-        Button3,
+  return /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between mt-4", children: [
+    /* @__PURE__ */ jsx12("div", { className: "flex items-center gap-2", children: leadingActions }),
+    /* @__PURE__ */ jsxs11(SimpleGroup, { justify: "flex-end", children: [
+      showCancel && /* @__PURE__ */ jsx12(
+        Button4,
         {
           variant: "outline",
           onClick: onCancel,
@@ -1515,8 +1978,8 @@ function FormActions({
           children: cancelLabel
         }
       ),
-      /* @__PURE__ */ jsx10(
-        Button3,
+      /* @__PURE__ */ jsx12(
+        Button4,
         {
           onClick: onSave,
           onMouseDown: keepFocus,
@@ -1534,7 +1997,7 @@ 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";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function ExtraPropertiesCard({ properties, schema }) {
   const [opened, { toggle }] = useDisclosure(false);
   const extraProperties = useMemo2(() => {
@@ -1546,32 +2009,35 @@ function ExtraPropertiesCard({ properties, schema }) {
     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(
+  return /* @__PURE__ */ jsxs12(Card, { className: "border p-3", children: [
+    /* @__PURE__ */ jsxs12(
       "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" }),
+          opened ? /* @__PURE__ */ jsx13(ChevronDown, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx13(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) }) }) }) })
+    /* @__PURE__ */ jsx13(Collapsible, { open: opened, children: /* @__PURE__ */ jsx13(CollapsibleContent, { children: /* @__PURE__ */ jsx13("pre", { className: "text-xs bg-muted p-2 rounded overflow-x-auto", children: /* @__PURE__ */ jsx13("code", { children: JSON.stringify(extraProperties, null, 2) }) }) }) })
   ] });
 }
 var ExtraPropertiesCard_default = ExtraPropertiesCard;
 
 // src/JsonSchemaFormRenderer.tsx
-import React13, { useCallback as useCallback8, useContext as useContext2, useMemo as useMemo9 } from "react";
+import React18, { useCallback as useCallback9, useContext as useContext2, useMemo as useMemo12 } from "react";
 import { SimpleStack } from "@petrarca/sonnet-ui";
 import { AlertCircle as AlertCircle2 } from "lucide-react";
 import {
   WIDTH_TOKEN_REMS
 } from "@petrarca/sonnet-core/schema";
-import { isFieldRequired, evaluateUiRule } from "@petrarca/sonnet-core/schema";
-import { FORM_ITEM_ID_FIELD as FORM_ITEM_ID_FIELD2 } from "@petrarca/sonnet-core";
+import {
+  isFieldRequired,
+  evaluateUiRule,
+  stripFormItemIds as stripFormItemIds2
+} from "@petrarca/sonnet-core/schema";
 
 // src/widgets/types.ts
 function firstError(rawErrors) {
@@ -1579,7 +2045,7 @@ function firstError(rawErrors) {
 }
 
 // src/widgets/TextInputWidget.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function inputTypeFromFormat(format) {
   if (format === "email") return "email";
   if (format === "uri" || format === "url") return "url";
@@ -1604,7 +2070,7 @@ function TextInputWidget({
 }) {
   const error = firstError(rawErrors);
   const compact = options?.compact;
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx14(
     FormInput,
     {
       id,
@@ -1631,7 +2097,7 @@ function TextInputWidget({
 }
 
 // src/widgets/TextareaWidget.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function TextareaWidget({
   id,
   name,
@@ -1652,7 +2118,7 @@ function TextareaWidget({
   const minRows = options.rows || options.minRows || 3;
   const autosize = options.autosize !== false;
   const error = firstError(rawErrors);
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx15(
     FormTextarea,
     {
       id,
@@ -1678,7 +2144,7 @@ function TextareaWidget({
 }
 
 // src/widgets/NumberWidget.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function NumberWidget({
   id,
   name,
@@ -1700,7 +2166,7 @@ function NumberWidget({
   const step = options.step ?? (isInteger ? 1 : void 0);
   const allowDecimal = options.allowDecimal ?? !isInteger;
   const error = firstError(rawErrors);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16(
     FormNumberInput,
     {
       id,
@@ -1728,7 +2194,7 @@ function NumberWidget({
 // 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";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function CheckboxWidget({
   id,
   value,
@@ -1747,12 +2213,12 @@ function CheckboxWidget({
   const compact = options?.compact;
   const isTriState = isNullableBoolean(propertySchema);
   const isChecked = value === true;
-  const isIndeterminate = isTriState && value === null;
+  const isIndeterminate = isTriState && value == null;
   const checkedState = isIndeterminate ? "indeterminate" : isChecked;
   const handleChange = useCallback3(
     (_newChecked) => {
       if (isTriState) {
-        if (value === null) {
+        if (value == null) {
           onChange(true);
         } else if (value === true) {
           onChange(false);
@@ -1765,7 +2231,7 @@ function CheckboxWidget({
     },
     [isTriState, value, onChange]
   );
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx17(
     FormCheckbox,
     {
       id,
@@ -1785,15 +2251,7 @@ function CheckboxWidget({
 
 // 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 };
-  });
-}
+import { jsx as jsx18 } from "react/jsx-runtime";
 function normalizeMultiValue(value) {
   if (Array.isArray(value)) return value.map(String);
   if (value) return [String(value)];
@@ -1833,7 +2291,7 @@ function SelectWidget(props) {
   const triggerClassName = compact ? "h-8 text-xs" : void 0;
   const handleBlur = () => onBlur?.(id, valueRef.current);
   if (isMultiple) {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx18(
       FormMultiSelect,
       {
         id,
@@ -1857,7 +2315,7 @@ function SelectWidget(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(
     FormSelect,
     {
       id,
@@ -1885,7 +2343,7 @@ function SelectWidget(props) {
 }
 
 // src/widgets/TagsInputWidget.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function TagsInputWidget({
   id,
   name,
@@ -1902,7 +2360,7 @@ function TagsInputWidget({
 }) {
   const error = firstError(rawErrors);
   const tags = Array.isArray(value) ? value.map(String) : [];
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx19(
     FormTagsInput,
     {
       id,
@@ -1925,9 +2383,13 @@ function TagsInputWidget({
 }
 
 // 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";
+import { Suspense, lazy, useCallback as useCallback4, useState as useState6 } from "react";
+import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+var JsonEditor = lazy(
+  () => import("@petrarca/sonnet-ui/json-editor").then((m) => ({
+    default: m.JsonEditor
+  }))
+);
 var FULL_DOCUMENT = ["/"];
 function JsonEditorWidget({
   id,
@@ -1938,7 +2400,7 @@ function JsonEditorWidget({
   required,
   options
 }) {
-  const [raw, setRaw] = useState5(
+  const [raw, setRaw] = useState6(
     value != null ? JSON.stringify(value, null, 2) : ""
   );
   const height = options?.height ?? "240px";
@@ -1953,54 +2415,116 @@ function JsonEditorWidget({
     },
     [onChange]
   );
-  return /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
-    label && /* @__PURE__ */ jsxs11("label", { htmlFor: id, className: "text-sm font-medium leading-none", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: "space-y-2", children: [
+    label && /* @__PURE__ */ jsxs13("label", { htmlFor: id, className: "text-sm font-medium leading-none", children: [
       label,
-      required && /* @__PURE__ */ jsx18("span", { className: "text-destructive ml-1", children: "*" })
+      required && /* @__PURE__ */ jsx20("span", { className: "text-destructive ml-1", children: "*" })
     ] }),
-    description && /* @__PURE__ */ jsx18("p", { className: "text-sm text-muted-foreground", children: description }),
-    /* @__PURE__ */ jsx18(
-      JsonEditor,
+    description && /* @__PURE__ */ jsx20("p", { className: "text-sm text-muted-foreground", children: description }),
+    /* @__PURE__ */ jsx20(
+      Suspense,
       {
-        value: raw,
-        editablePaths: FULL_DOCUMENT,
-        onChange: handleChange,
-        height,
-        className: "rounded-md border overflow-hidden"
+        fallback: /* @__PURE__ */ jsx20(
+          "div",
+          {
+            className: "rounded-md border bg-muted/30",
+            style: { height },
+            "aria-busy": true
+          }
+        ),
+        children: /* @__PURE__ */ jsx20(
+          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;
+// src/widgets/KeyValueWidget.tsx
+import { jsx as jsx21 } from "react/jsx-runtime";
+function displayOf(display) {
+  return display === "rows" || display === "keys" ? display : "tags";
 }
-function buildRestConfig(options) {
-  if (!("endpoint" in options) || !options.endpoint) return null;
-  const rawExtra = options.extraParams;
-  const extraParams = rawExtra && typeof rawExtra === "object" ? rawExtra : void 0;
-  return {
-    endpoint: String(options.endpoint),
-    valueKey: String(options.valueKey ?? "id"),
-    labelKey: String(options.labelKey ?? "name"),
-    searchKey: options.searchKey ? String(options.searchKey) : void 0,
-    extraParams
-  };
+function asStringMap(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return {};
+  return Object.fromEntries(
+    Object.entries(value).map(([k, v]) => [
+      k,
+      String(v)
+    ])
+  );
+}
+function KeyValueWidget({
+  id,
+  name,
+  value,
+  onChange,
+  required,
+  disabled,
+  readonly,
+  rawErrors,
+  label,
+  description,
+  options
+}) {
+  return /* @__PURE__ */ jsx21(
+    FormKeyValueInput,
+    {
+      id,
+      name,
+      value: asStringMap(value),
+      onChange: (next) => onChange(next),
+      label,
+      labelPlacement: options?.labelPlacement,
+      description,
+      required,
+      disabled,
+      readOnly: readonly,
+      error: firstError(rawErrors),
+      keyPlaceholder: options?.keyPlaceholder,
+      valuePlaceholder: options?.valuePlaceholder,
+      separator: options?.separator,
+      display: displayOf(options?.display)
+    }
+  );
+}
+
+// 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 jsx22, jsxs as jsxs14 } 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;
+  const rawExtra = options.extraParams;
+  const extraParams = rawExtra && typeof rawExtra === "object" ? rawExtra : void 0;
+  return {
+    endpoint: String(options.endpoint),
+    valueKey: String(options.valueKey ?? "id"),
+    labelKey: String(options.labelKey ?? "name"),
+    searchKey: options.searchKey ? String(options.searchKey) : void 0,
+    extraParams
+  };
 }
 function buildGraphqlConfig(options) {
   if (!("query" in options) || !options.query) return null;
@@ -2048,13 +2572,13 @@ function EntitySelectWidget({
     [fetcherConfig, name]
   );
   if (!fetcher) {
-    return /* @__PURE__ */ jsxs12("div", { className: "text-sm text-destructive", children: [
+    return /* @__PURE__ */ jsxs14("div", { className: "text-sm text-destructive", children: [
       'EntitySelectWidget: missing endpoint or query in x-ui-options for field "',
       name,
       '"'
     ] });
   }
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx22(
     EntitySelect,
     {
       id,
@@ -2100,7 +2624,7 @@ function useNestedFormContext() {
 }
 
 // src/templates/DefaultObjectContainerTemplate.tsx
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { ChevronDown as ChevronDown2, ChevronRight as ChevronRight2 } from "lucide-react";
 import { Card as Card2, CardContent, CardHeader, CardTitle } from "@petrarca/sonnet-ui";
 import {
@@ -2108,18 +2632,18 @@ import {
   CollapsibleContent as CollapsibleContent2,
   CollapsibleTrigger
 } from "@petrarca/sonnet-ui";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs15 } 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 })
+  return /* @__PURE__ */ jsxs15(Card2, { children: [
+    label && /* @__PURE__ */ jsxs15(CardHeader, { className: "pb-3", children: [
+      /* @__PURE__ */ jsx23(CardTitle, { className: "text-base", children: label }),
+      description && /* @__PURE__ */ jsx23("p", { className: "text-sm text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsx20(CardContent, { children })
+    /* @__PURE__ */ jsx23(CardContent, { children })
   ] });
 }
 function SectionVariant({
@@ -2127,12 +2651,12 @@ function SectionVariant({
   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 })
+  return /* @__PURE__ */ jsxs15("div", { className: "space-y-3", children: [
+    label && /* @__PURE__ */ jsxs15("div", { children: [
+      /* @__PURE__ */ jsx23("h4", { className: "text-sm font-medium", children: label }),
+      description && /* @__PURE__ */ jsx23("p", { className: "text-xs text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsx20("div", { className: "pl-3 border-l-2 border-muted", children })
+    /* @__PURE__ */ jsx23("div", { className: "pl-3 border-l-2 border-muted", children })
   ] });
 }
 function DefaultObjectContainerTemplate({
@@ -2144,10 +2668,10 @@ function DefaultObjectContainerTemplate({
 }) {
   switch (variant) {
     case "card":
-      return /* @__PURE__ */ jsx20(CardVariant, { label, description, children });
+      return /* @__PURE__ */ jsx23(CardVariant, { label, description, children });
     case "collapsible":
-      if (!label) return /* @__PURE__ */ jsx20(SectionVariant, { children });
-      return /* @__PURE__ */ jsx20(
+      if (!label) return /* @__PURE__ */ jsx23(SectionVariant, { children });
+      return /* @__PURE__ */ jsx23(
         CollapsibleVariant,
         {
           label,
@@ -2157,12 +2681,12 @@ function DefaultObjectContainerTemplate({
         }
       );
     case "inline":
-      return /* @__PURE__ */ jsx20("div", { children });
+      return /* @__PURE__ */ jsx23("div", { children });
     case "borderless":
-      return /* @__PURE__ */ jsx20("div", { className: "space-y-4", children });
+      return /* @__PURE__ */ jsx23("div", { className: "space-y-4", children });
     case "section":
     default:
-      return /* @__PURE__ */ jsx20(SectionVariant, { label, description, children });
+      return /* @__PURE__ */ jsx23(SectionVariant, { label, description, children });
   }
 }
 function CollapsibleVariant({
@@ -2171,26 +2695,26 @@ function CollapsibleVariant({
   defaultOpen,
   children
 }) {
-  const [open, setOpen] = useState6(defaultOpen);
-  return /* @__PURE__ */ jsxs13(Collapsible2, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx20(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs13(
+  const [open, setOpen] = useState7(defaultOpen);
+  return /* @__PURE__ */ jsxs15(Collapsible2, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx23(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs15(
       "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" }),
+          open ? /* @__PURE__ */ jsx23(ChevronDown2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx23(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 })
+    description && /* @__PURE__ */ jsx23("p", { className: "text-xs text-muted-foreground ml-6", children: description }),
+    /* @__PURE__ */ jsx23(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";
+import { Fragment as Fragment3, jsx as jsx24 } from "react/jsx-runtime";
 function buildSubSchema(prop) {
   const properties = prop.properties;
   if (!properties) return null;
@@ -2256,7 +2780,7 @@ function ObjectWidget({
     globalOptions,
     layout
   );
-  const content = /* @__PURE__ */ jsx21(
+  const content = /* @__PURE__ */ jsx24(
     Renderer,
     {
       schema: subSchema,
@@ -2271,8 +2795,8 @@ function ObjectWidget({
       onBlur: onBlur ? () => onBlur(id, value) : void 0
     }
   );
-  if (displayContents) return /* @__PURE__ */ jsx21(Fragment3, { children: content });
-  return /* @__PURE__ */ jsx21(
+  if (displayContents) return /* @__PURE__ */ jsx24(Fragment3, { children: content });
+  return /* @__PURE__ */ jsx24(
     ContainerTemplate,
     {
       label,
@@ -2286,15 +2810,15 @@ function ObjectWidget({
 
 // src/widgets/ArrayWidget.tsx
 import { useCallback as useCallback5, useMemo as useMemo5 } from "react";
-import { Plus as Plus2 } from "lucide-react";
-import { Button as Button5 } from "@petrarca/sonnet-ui";
+import { Plus as Plus3 } from "lucide-react";
+import { Button as Button6 } 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";
+import { Button as Button5 } from "@petrarca/sonnet-ui";
+import { jsx as jsx25, jsxs as jsxs16 } from "react/jsx-runtime";
 function DefaultArrayItemTemplate({
   children,
   index,
@@ -2308,16 +2832,16 @@ function DefaultArrayItemTemplate({
   onMoveDown
 }) {
   const showControls = canRemove || orderable;
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs16(
     "div",
     {
       "data-fid": fid,
       className: "relative flex gap-2 rounded-md border border-border/50 bg-muted/20 p-3",
       children: [
-        /* @__PURE__ */ jsx22("div", { className: "flex-1 min-w-0", children }),
-        showControls && /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-1 pt-0.5", children: [
-          orderable && index > 0 && /* @__PURE__ */ jsx22(
-            Button4,
+        /* @__PURE__ */ jsx25("div", { className: "flex-1 min-w-0", children }),
+        showControls && /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1 pt-0.5", children: [
+          orderable && index > 0 && /* @__PURE__ */ jsx25(
+            Button5,
             {
               type: "button",
               variant: "ghost",
@@ -2325,11 +2849,11 @@ function DefaultArrayItemTemplate({
               disabled,
               onClick: onMoveUp,
               title: "Move up",
-              children: /* @__PURE__ */ jsx22(ChevronUp, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx25(ChevronUp, { className: "h-3.5 w-3.5" })
             }
           ),
-          orderable && index < total - 1 && /* @__PURE__ */ jsx22(
-            Button4,
+          orderable && index < total - 1 && /* @__PURE__ */ jsx25(
+            Button5,
             {
               type: "button",
               variant: "ghost",
@@ -2337,11 +2861,11 @@ function DefaultArrayItemTemplate({
               disabled,
               onClick: onMoveDown,
               title: "Move down",
-              children: /* @__PURE__ */ jsx22(ChevronDown3, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx25(ChevronDown3, { className: "h-3.5 w-3.5" })
             }
           ),
-          canRemove && /* @__PURE__ */ jsx22(
-            Button4,
+          canRemove && /* @__PURE__ */ jsx25(
+            Button5,
             {
               type: "button",
               variant: "ghost",
@@ -2350,7 +2874,7 @@ function DefaultArrayItemTemplate({
               onClick: onRemove,
               title: "Remove item",
               className: "text-muted-foreground hover:text-destructive",
-              children: /* @__PURE__ */ jsx22(Trash2, { className: "h-3.5 w-3.5" })
+              children: /* @__PURE__ */ jsx25(Trash2, { className: "h-3.5 w-3.5" })
             }
           )
         ] })
@@ -2367,7 +2891,7 @@ function buildGridTemplate(layout, canRemove, fieldCount, orderable = false) {
 }
 
 // src/templates/DefaultArrayHeaderTemplate.tsx
-import { jsx as jsx23, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs17 } from "react/jsx-runtime";
 function DefaultArrayHeaderTemplate({
   itemSchema,
   layout,
@@ -2381,7 +2905,7 @@ function DefaultArrayHeaderTemplate({
   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(
+  return /* @__PURE__ */ jsxs17(
     "div",
     {
       style: {
@@ -2390,16 +2914,16 @@ function DefaultArrayHeaderTemplate({
         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", {})
+        fieldNames.map((name) => /* @__PURE__ */ jsx26("span", { className: "text-xs font-medium text-muted-foreground", children: properties[name]?.title ?? name }, name)),
+        orderable && /* @__PURE__ */ jsx26("span", {}),
+        canRemove && /* @__PURE__ */ jsx26("span", {})
       ]
     }
   );
 }
 
 // src/widgets/ArrayWidget.tsx
-import { jsx as jsx24, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs18 } from "react/jsx-runtime";
 function countFields(itemSchema) {
   return Object.keys(itemSchema.properties ?? {}).length;
 }
@@ -2438,9 +2962,9 @@ function buildSubGlobalOptions(layout, isHorizontal) {
 }
 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 })
+  return /* @__PURE__ */ jsxs18("div", { children: [
+    /* @__PURE__ */ jsx27("h4", { className: "text-sm font-medium", children: label }),
+    description && /* @__PURE__ */ jsx27("p", { className: "text-xs text-muted-foreground", children: description })
   ] });
 }
 function useArrayHandlers(items, onChange, propertySchema) {
@@ -2488,19 +3012,20 @@ function ArrayWidget({
   description,
   options,
   schema,
-  name
+  name,
+  onBlur
 }) {
   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.' });
+    return /* @__PURE__ */ jsx27("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(
+  return /* @__PURE__ */ jsx27(
     ArrayWidgetInner,
     {
       items,
@@ -2522,7 +3047,8 @@ function ArrayWidget({
       onItemChange: handleItemChange,
       onAdd: handleAdd,
       onRemove: handleRemove,
-      onMove: handleMove
+      onMove: handleMove,
+      onBlur
     }
   );
 }
@@ -2582,7 +3108,8 @@ function ArrayWidgetInner({
   onItemChange,
   onAdd,
   onRemove,
-  onMove
+  onMove,
+  onBlur
 }) {
   const constraints = resolveConstraints(
     propertySchema,
@@ -2599,10 +3126,10 @@ function ArrayWidgetInner({
   );
   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(
+  return /* @__PURE__ */ jsxs18("div", { className: isHorizontal ? "space-y-1" : "space-y-3", children: [
+    /* @__PURE__ */ jsx27(ArrayHeader, { label, description }),
+    items.length === 0 && display.emptyMessage && /* @__PURE__ */ jsx27("p", { className: "text-sm text-muted-foreground italic", children: display.emptyMessage }),
+    items.length > 0 && /* @__PURE__ */ jsx27(
       HeaderTemplate,
       {
         itemSchema,
@@ -2612,7 +3139,7 @@ function ArrayWidgetInner({
         fieldCount
       }
     ),
-    items.map((item, index) => /* @__PURE__ */ jsx24(
+    items.map((item, index) => /* @__PURE__ */ jsx27(
       ActiveItemTemplate,
       {
         index,
@@ -2626,7 +3153,7 @@ function ArrayWidgetInner({
         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(
+        children: /* @__PURE__ */ jsx27(
           ObjectWidget,
           {
             id: `field-${name}-${index}`,
@@ -2641,14 +3168,15 @@ function ArrayWidgetInner({
             description: void 0,
             disabled,
             readonly,
-            options: itemOptions
+            options: itemOptions,
+            onBlur
           }
         )
       },
       item[FORM_ITEM_ID_FIELD]
     )),
-    canAdd && /* @__PURE__ */ jsxs16(
-      Button5,
+    canAdd && /* @__PURE__ */ jsxs18(
+      Button6,
       {
         type: "button",
         variant: "outline",
@@ -2657,87 +3185,1221 @@ function ArrayWidgetInner({
         disabled,
         className: "gap-1.5",
         children: [
-          /* @__PURE__ */ jsx24(Plus2, { className: "h-3.5 w-3.5" }),
+          /* @__PURE__ */ jsx27(Plus3, { 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";
+
+// src/widgets/QuantityWidget.tsx
+import { useCallback as useCallback6, useRef as useRef4, useState as useState8 } from "react";
+import { unitRangesOf } from "@petrarca/sonnet-core/schema";
+import { jsx as jsx28 } from "react/jsx-runtime";
+function isUnitOption(u) {
+  return typeof u === "object" && u !== null && typeof u.value === "string" && typeof u.label === "string";
+}
+function schemaUnits(propertySchema) {
+  const codes = propertySchema.properties?.unit?.enum;
+  return Array.isArray(codes) ? codes.map((c) => ({ value: String(c), label: String(c) })) : [];
+}
+function withSchemaRanges(units, propertySchema) {
+  const ranges = unitRangesOf(propertySchema) ?? {};
+  return units.map((u) => {
+    const range = ranges[u.value];
+    return range ? { ...u, min: range.min, max: range.max } : u;
+  });
+}
+function parseQuantityOptions(options, fallbackUnits) {
+  const units = Array.isArray(options.units) ? options.units.filter(isUnitOption) : fallbackUnits;
+  const precision = typeof options.precision === "number" ? options.precision : void 0;
+  const step = typeof options.step === "number" ? options.step : void 0;
+  const unitPosition = options.unitPosition === "prefix" || options.unitPosition === "suffix" ? options.unitPosition : void 0;
+  return { units, precision, step, unitPosition };
+}
+function QuantityWidget({
+  id,
+  name,
+  value,
+  onChange,
+  onBlur,
+  propertySchema,
+  required,
+  disabled,
+  readonly,
+  rawErrors,
+  label,
+  description,
+  placeholder,
+  autofocus,
+  options = {}
+}) {
+  const error = firstError(rawErrors);
+  const {
+    units: optionUnits,
+    precision,
+    step,
+    unitPosition: unitPositionOpt
+  } = parseQuantityOptions(options, schemaUnits(propertySchema));
+  const units = withSchemaRanges(optionUnits, propertySchema);
+  const [pendingUnit, setPendingUnit] = useState8();
+  const stored = value != null && typeof value === "object" && !Array.isArray(value) ? value : void 0;
+  const quantityValue = stored ?? (pendingUnit ? { value: void 0, unit: pendingUnit } : void 0);
+  const handleChange = useCallback6(
+    (next) => {
+      if (next.value !== void 0) return onChange(next);
+      setPendingUnit(next.unit);
+      onChange(void 0);
+    },
+    [onChange]
+  );
+  const valueRef = useRef4(value);
+  valueRef.current = value;
+  const handleBlur = useCallback6(() => {
+    onBlur?.(id, valueRef.current);
+  }, [id, onBlur]);
+  return /* @__PURE__ */ jsx28(
+    FormQuantityInput,
+    {
+      id,
+      name,
+      value: quantityValue,
+      onChange: handleChange,
+      onBlur: handleBlur,
+      units,
+      freeUnit: propertySchema.properties?.unit !== void 0,
+      unitPosition: unitPositionOpt,
+      precision,
+      step,
+      min: propertySchema.minimum,
+      max: propertySchema.maximum,
+      label,
+      labelPlacement: options?.labelPlacement,
+      description,
+      error,
+      placeholder,
+      required,
+      disabled,
+      readOnly: readonly,
+      autoFocus: autofocus
+    }
+  );
+}
+
+// src/widgets/CodedValueWidget.tsx
+import * as React13 from "react";
+import { ChevronsUpDown as ChevronsUpDown4, Loader2, TriangleAlert, X as X5 } from "lucide-react";
+import { cn as cn12, EMPTY_VALUE } from "@petrarca/sonnet-core";
+import {
+  bindingOf,
+  codingKey as codingKey5
+} from "@petrarca/sonnet-core/schema";
+import {
+  useTerminology
+} from "@petrarca/sonnet-core/terminology";
+import {
+  Badge as Badge4,
+  Button as Button7,
+  CodedValueDisplay as CodedValueDisplay2,
+  Popover as Popover3,
+  PopoverContent as PopoverContent3,
+  PopoverTrigger as PopoverTrigger3
+} from "@petrarca/sonnet-ui";
+
+// src/widgets/codedValue/codedValueModel.ts
+import {
+  codingKey
+} from "@petrarca/sonnet-core/schema";
+var CODING_KEYS = ["system", "code", "version", "display"];
+function shapeOf(prop) {
+  if (prop?.type === "string") return "code";
+  return prop?.anyOf?.some((m) => m.type === "string") ? "codingOrText" : "coding";
+}
+function fieldModelOf(prop, options) {
+  const multiple = prop.type === "array";
+  const keep = Array.isArray(options?.keep) ? options.keep.filter(
+    (k) => typeof k === "string"
+  ) : [];
+  return {
+    multiple,
+    shape: shapeOf(multiple ? prop.items : prop),
+    store: typeof options?.store === "string" ? options.store : "code",
+    keep: keep.filter((k) => !CODING_KEYS.includes(k))
+  };
+}
+function takesText(field, binding) {
+  if (field.shape === "codingOrText") return true;
+  return field.shape === "code" && binding?.strength === "extensible";
+}
+function asCoding(value) {
+  if (typeof value !== "object" || value === null) return void 0;
+  const c = value;
+  return typeof c.code === "string" && c.code ? { ...c, system: c.system ?? "", code: c.code } : void 0;
+}
+function entryOf(value, field, binding) {
+  if (typeof value !== "string") {
+    const coding = asCoding(value);
+    return coding && { coding };
+  }
+  if (!value) return void 0;
+  if (field.shape === "codingOrText") return { text: value };
+  return {
+    coding: {
+      system: binding?.system ?? "",
+      code: value,
+      ...binding?.version && { version: binding.version }
+    }
+  };
+}
+function entriesOf(value, field, binding) {
+  const values = field.multiple ? Array.isArray(value) ? value : [] : [value];
+  return values.map((v) => entryOf(v, field, binding)).filter((e) => e !== void 0);
+}
+function entryKey(e) {
+  return e.coding ? codingKey(e.coding) : `text:${e.text ?? ""}`;
+}
+function toStored(hit, field, binding) {
+  if (field.shape === "code") return String(hit[field.store] ?? hit.code);
+  const version = hit.version ?? binding?.version;
+  const kept = field.keep.filter((k) => hit[k] != null);
+  return {
+    system: hit.system,
+    code: hit.code,
+    ...version && { version },
+    ...hit.display && { display: hit.display },
+    ...Object.fromEntries(kept.map((k) => [k, hit[k]]))
+  };
+}
+function storedKey(v, field, binding) {
+  const entry = entryOf(v, field, binding);
+  return entry ? entryKey(entry) : void 0;
+}
+function withAnswer(value, answer, field, binding) {
+  if (!field.multiple) return answer;
+  const current = Array.isArray(value) ? value : [];
+  const key = storedKey(answer, field, binding);
+  const others = current.filter((v) => storedKey(v, field, binding) !== key);
+  if (others.length < current.length) return others.length ? others : void 0;
+  return [...current, answer];
+}
+function withoutAnswer(value, key, field, binding) {
+  if (!field.multiple) return void 0;
+  const current = Array.isArray(value) ? value : [];
+  const others = current.filter((v) => storedKey(v, field, binding) !== key);
+  return others.length ? others : void 0;
+}
+
+// src/widgets/codedValue/useCodedValueOptions.ts
+import { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef5, useState as useState9 } from "react";
+var PAGE_SIZE = 50;
+var DEBOUNCE_MS = 250;
+function useDebounced(text) {
+  const [settled, setSettled] = useState9(text);
+  useEffect4(() => {
+    const t = setTimeout(() => setSettled(text), DEBOUNCE_MS);
+    return () => clearTimeout(t);
+  }, [text]);
+  return settled;
+}
+function fitsOnePage(result) {
+  return result.total !== void 0 ? result.total <= PAGE_SIZE : result.codings.length < PAGE_SIZE;
+}
+function moreAfter(result) {
+  return result.total !== void 0 ? result.codings.length < result.total : false;
+}
+function usePagedSearch(service, list) {
+  const [page, setPage] = useState9();
+  const [loading, setLoading] = useState9(false);
+  const [error, setError] = useState9();
+  const request = useRef5(0);
+  const shown = useRef5(null);
+  const run = useCallback7(
+    (text, offset, before) => {
+      if (!service || !list) return Promise.resolve(void 0);
+      const id = ++request.current;
+      setLoading(true);
+      return service.search({ ...list, text, limit: PAGE_SIZE, offset }).then((r) => {
+        if (id !== request.current) return void 0;
+        shown.current = text ?? "";
+        const result = { ...r, codings: [...before, ...r.codings] };
+        setPage({ result, hasMore: moreAfter(result) });
+        setError(void 0);
+        return r;
+      }).catch((e) => {
+        if (id === request.current) setError(String(e));
+        return void 0;
+      }).finally(() => {
+        if (id === request.current) setLoading(false);
+      });
+    },
+    [service, list]
+  );
+  const clear = useCallback7(() => {
+    request.current++;
+    shown.current = null;
+    setPage(void 0);
+    setLoading(false);
+  }, []);
+  const isShown = useCallback7((text) => shown.current === text, []);
+  return { page, loading, error, run, clear, isShown };
+}
+function useCodedValueOptions(service, list, forced, minChars = 1) {
+  const [search, setSearch] = useState9("");
+  const [decided, setDecided] = useState9(forced);
+  const text = useDebounced(search.trim());
+  const { page, loading, error, run, clear, isShown } = usePagedSearch(
+    service,
+    list
+  );
+  const mode = forced ?? decided;
+  useEffect4(() => {
+    if (forced) return;
+    void run(void 0, 0, []).then(
+      (r) => r && setDecided(fitsOnePage(r) ? "list" : "search")
+    );
+  }, [forced, run]);
+  useEffect4(() => {
+    if (!mode) return;
+    if (mode === "search" && text.length < Math.max(minChars, 1)) clear();
+    else if (!isShown(text)) void run(text || void 0, 0, []);
+  }, [mode, text, minChars, run, clear, isShown]);
+  const loadMore = useCallback7(() => {
+    const loaded = page?.result.codings ?? [];
+    void run(text || void 0, loaded.length, loaded);
+  }, [page, run, text]);
+  return {
+    hits: page?.result.codings ?? [],
+    total: page?.result.total,
+    hasMore: page?.hasMore ?? false,
+    loading,
+    error,
+    mode,
+    search,
+    setSearch,
+    minChars,
+    loadMore
+  };
+}
+
+// src/widgets/codedValue/useStoredLabel.ts
+import { useEffect as useEffect5, useState as useState10 } from "react";
+import {
+  codingKey as codingKey2
+} from "@petrarca/sonnet-core/schema";
+async function fetchLabel(service, coding, valueSet, version) {
+  if (coding.system) return (await service.lookup(coding))?.display;
+  if (!valueSet) return void 0;
+  const { codings } = await service.search({
+    valueSet,
+    version,
+    text: coding.code
+  });
+  return codings.find((c) => c.code === coding.code)?.display;
+}
+function labelQuery(coding, binding) {
+  const system = coding?.system ?? "";
+  const code = coding?.code ?? "";
+  return {
+    own: coding?.display,
+    system,
+    code,
+    version: coding?.version ?? binding?.version,
+    valueSet: binding?.valueSet,
+    key: codingKey2({ system, code })
+  };
+}
+function useStoredLabel(service, coding, binding) {
+  const [fetched, setFetched] = useState10();
+  const { own, system, code, version, valueSet, key } = labelQuery(
+    coding,
+    binding
+  );
+  useEffect5(() => {
+    if (!service || !code || own) return;
+    let live = true;
+    fetchLabel(service, { system, code, version }, valueSet, version).then((label) => live && setFetched({ key, label })).catch(() => live && setFetched({ key }));
+    return () => {
+      live = false;
+    };
+  }, [service, system, code, version, valueSet, own, key]);
+  return own ?? (fetched?.key === key ? fetched.label : void 0);
+}
+
+// src/widgets/codedValue/useListCheck.ts
+import { useEffect as useEffect6, useMemo as useMemo6, useState as useState11 } from "react";
+import {
+  codingKey as codingKey3
+} from "@petrarca/sonnet-core/schema";
+var NONE = /* @__PURE__ */ new Map();
+function checks(binding, storesCodes) {
+  return binding?.strength === "required" && !!(binding.valueSet || binding.system) && storesCodes;
+}
+async function warningOf(validate, binding, coding) {
+  try {
+    const result = await validate({
+      valueSet: binding.valueSet,
+      system: binding.system,
+      version: binding.version,
+      code: coding.code
+    });
+    if (result.inList) return void 0;
+    return [
+      codingKey3(coding),
+      result.message ?? `${coding.code} is not in the list.`
+    ];
+  } catch {
+    return void 0;
+  }
+}
+function useListCheck(service, binding, codings, storesCodes) {
+  const [warnings, setWarnings] = useState11(NONE);
+  const validate = useMemo6(() => service?.validate?.bind(service), [service]);
+  const active = !!validate && checks(binding, storesCodes);
+  const codes = active ? JSON.stringify(codings.map((c) => [c.system, c.code])) : "[]";
+  const valueSet = binding?.valueSet;
+  const system = binding?.system;
+  const version = binding?.version;
+  useEffect6(() => {
+    const stored = JSON.parse(codes).map(
+      ([s, code]) => ({ system: s, code })
+    );
+    if (!validate || !active || stored.length === 0) {
+      setWarnings(NONE);
+      return;
+    }
+    const list = { valueSet, system, version, strength: "required" };
+    let live = true;
+    void Promise.all(stored.map((c) => warningOf(validate, list, c))).then(
+      (found) => {
+        if (!live) return;
+        const entries = found.filter((w) => w !== void 0);
+        setWarnings(entries.length ? new Map(entries) : NONE);
+      }
+    );
+    return () => {
+      live = false;
+    };
+  }, [active, validate, codes, valueSet, system, version]);
+  return warnings;
+}
+
+// src/widgets/codedValue/HitList.tsx
+import { Check as Check3 } from "lucide-react";
+import { cn as cn11 } from "@petrarca/sonnet-core";
+import { codingKey as codingKey4 } from "@petrarca/sonnet-core/schema";
+import {
+  CodedValueDisplay,
+  Command as Command3,
+  CommandEmpty as CommandEmpty3,
+  CommandGroup as CommandGroup3,
+  CommandInput as CommandInput3,
+  CommandItem as CommandItem3,
+  CommandList as CommandList3
+} from "@petrarca/sonnet-ui";
+import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
+function emptyMessage(o) {
+  if (o.loading) return "Loading...";
+  if (o.error) return "The list could not be loaded.";
+  const typed = o.search.trim().length;
+  if (o.mode === "search" && typed < o.minChars)
+    return o.minChars > 1 && typed > 0 ? `Type at least ${o.minChars} characters...` : "Type to search...";
+  return "No matches.";
+}
+function HitItem({
+  hit,
+  selected,
+  onPick
+}) {
+  return /* @__PURE__ */ jsxs19(CommandItem3, { value: codingKey4(hit), onSelect: () => onPick(hit), children: [
+    /* @__PURE__ */ jsx29(
+      Check3,
+      {
+        className: cn11(
+          "mr-2 h-4 w-4 shrink-0",
+          selected ? "opacity-100" : "opacity-0"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs19("div", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsx29(CodedValueDisplay, { code: hit.code, display: hit.display }),
+      hit.path && hit.path.length > 0 && /* @__PURE__ */ jsx29("div", { className: "truncate text-xs text-muted-foreground", children: hit.path.join(" \u203A ") })
+    ] })
+  ] });
+}
+function HitList({
+  options,
+  selected,
+  freeText,
+  onPick,
+  onFreeText
+}) {
+  return /* @__PURE__ */ jsxs19(Command3, { shouldFilter: false, children: [
+    /* @__PURE__ */ jsx29(
+      CommandInput3,
+      {
+        placeholder: "Search...",
+        value: options.search,
+        onValueChange: options.setSearch
+      }
+    ),
+    /* @__PURE__ */ jsxs19(CommandList3, { children: [
+      /* @__PURE__ */ jsx29(CommandEmpty3, { children: emptyMessage(options) }),
+      /* @__PURE__ */ jsxs19(CommandGroup3, { children: [
+        options.hits.map((hit) => /* @__PURE__ */ jsx29(
+          HitItem,
+          {
+            hit,
+            selected: selected.has(codingKey4(hit)),
+            onPick
+          },
+          codingKey4(hit)
+        )),
+        options.hasMore && /* @__PURE__ */ jsx29(CommandItem3, { value: "__more", onSelect: options.loadMore, children: /* @__PURE__ */ jsxs19("span", { className: "text-sm text-muted-foreground", children: [
+          "Show more",
+          options.total !== void 0 && ` (${options.hits.length} of ${options.total})`
+        ] }) }),
+        freeText && /* @__PURE__ */ jsx29(CommandItem3, { value: "__text", onSelect: () => onFreeText(freeText), children: /* @__PURE__ */ jsxs19("span", { className: "text-sm", children: [
+          "Use \u201C",
+          freeText,
+          "\u201D"
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/widgets/codedValue/InlineIconButton.tsx
+import { jsx as jsx30 } from "react/jsx-runtime";
+function InlineIconButton({
+  label,
+  onAct,
+  children
+}) {
+  const act = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onAct();
+  };
+  return /* @__PURE__ */ jsx30(
+    "span",
+    {
+      role: "button",
+      "aria-label": label,
+      tabIndex: -1,
+      className: "rounded-sm opacity-50 hover:opacity-100",
+      onPointerDown: act,
+      children
+    }
+  );
+}
+
+// src/widgets/codedValue/listOptions.ts
+import * as React12 from "react";
+function modeOption(options) {
+  const mode = options?.mode;
+  return mode === "list" || mode === "search" ? mode : void 0;
+}
+function minCharsOption(options) {
+  const n = options?.minChars;
+  return typeof n === "number" && n >= 1 ? n : 1;
+}
+function useListRef(binding) {
+  const { valueSet, system, version } = binding ?? {};
+  return React12.useMemo(
+    () => valueSet || system ? { valueSet, system, version } : void 0,
+    [valueSet, system, version]
+  );
+}
+
+// src/widgets/CodedValueWidget.tsx
+import { jsx as jsx31, jsxs as jsxs20 } from "react/jsx-runtime";
+function freeTextOf(o, open) {
+  const text = o.search.trim();
+  if (!open || !text) return void 0;
+  return o.hits.some((h) => h.code === text) ? void 0 : text;
+}
+function EntryText({
+  entry,
+  shown
+}) {
+  const key = entryKey(entry);
+  const known = shown.picked.has(key);
+  const looked = useStoredLabel(
+    known || !shown.lookup ? null : shown.service,
+    entry.coding,
+    shown.binding
+  );
+  if (!entry.coding)
+    return /* @__PURE__ */ jsx31("span", { className: "truncate text-sm", children: entry.text });
+  return /* @__PURE__ */ jsx31(
+    CodedValueDisplay2,
+    {
+      code: entry.coding.code,
+      display: known ? shown.picked.get(key) : looked,
+      system: entry.coding.system || void 0
+    }
+  );
+}
+function Chip({
+  entry,
+  shown,
+  onRemove
+}) {
+  return /* @__PURE__ */ jsxs20(Badge4, { variant: "secondary", className: "max-w-full gap-1 font-normal", children: [
+    /* @__PURE__ */ jsx31(EntryText, { entry, shown }),
+    onRemove && /* @__PURE__ */ jsx31(
+      InlineIconButton,
+      {
+        label: "Remove",
+        onAct: () => onRemove(entryKey(entry)),
+        children: /* @__PURE__ */ jsx31(X5, { className: "h-3 w-3" })
+      }
+    )
+  ] });
+}
+function Entries({
+  entries,
+  field,
+  shown,
+  onRemove
+}) {
+  if (!field.multiple) return /* @__PURE__ */ jsx31(EntryText, { entry: entries[0], shown });
+  return /* @__PURE__ */ jsx31("span", { className: "flex min-w-0 flex-wrap gap-1", children: entries.map((e) => /* @__PURE__ */ jsx31(Chip, { entry: e, shown, onRemove }, entryKey(e))) });
+}
+function TriggerIcons3({
+  loading,
+  onClear
+}) {
+  return /* @__PURE__ */ jsxs20("span", { className: "ml-2 flex shrink-0 items-center gap-1", children: [
+    loading && /* @__PURE__ */ jsx31(Loader2, { className: "h-4 w-4 animate-spin opacity-50" }),
+    onClear && /* @__PURE__ */ jsx31(InlineIconButton, { label: "Clear selection", onAct: onClear, children: /* @__PURE__ */ jsx31(X5, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsx31(ChevronsUpDown4, { className: "h-4 w-4 opacity-50" })
+  ] });
+}
+function fieldStateOf(props) {
+  const binding = bindingOf(props.propertySchema);
+  const field = fieldModelOf(props.propertySchema, props.options);
+  return {
+    binding,
+    field,
+    entries: entriesOf(props.value, field, binding),
+    storesCodes: field.store === "code"
+  };
+}
+function useAnswers(props, state) {
+  const { value, onChange } = props;
+  const { binding, field } = state;
+  const [picked, setPicked] = React13.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const pick = (hit) => {
+    setPicked((m) => new Map(m).set(codingKey5(hit), hit.display));
+    onChange(withAnswer(value, toStored(hit, field, binding), field, binding));
+  };
+  const takeText = (typed) => onChange(withAnswer(value, typed, field, binding));
+  const remove = (key) => onChange(withoutAnswer(value, key, field, binding));
+  return { picked, pick, takeText, remove };
+}
+function EditableCodedValue({
+  props,
+  state,
+  service
+}) {
+  const { id, value, onChange, onBlur, required, rawErrors, placeholder } = props;
+  const { binding, field, entries } = state;
+  const [open, setOpen] = React13.useState(false);
+  const list = useListRef(binding);
+  const options = useCodedValueOptions(
+    service,
+    list,
+    modeOption(props.options),
+    minCharsOption(props.options)
+  );
+  const answers = useAnswers(props, state);
+  const shown = {
+    binding,
+    service,
+    picked: answers.picked,
+    lookup: state.storesCodes
+  };
+  const empty = entries.length === 0;
+  const close = (next) => {
+    setOpen(next);
+    if (!next) {
+      options.setSearch("");
+      onBlur?.(id, value);
+    }
+  };
+  const done = () => {
+    if (!field.multiple) close(false);
+  };
+  const clear = () => onChange(void 0);
+  return /* @__PURE__ */ jsxs20(Popover3, { open, onOpenChange: close, children: [
+    /* @__PURE__ */ jsx31(PopoverTrigger3, { asChild: true, children: /* @__PURE__ */ jsxs20(
+      Button7,
+      {
+        id,
+        variant: "outline",
+        role: "combobox",
+        "aria-expanded": open,
+        className: cn12(
+          "h-auto min-h-9 w-full justify-between font-normal",
+          empty && "text-muted-foreground",
+          firstError(rawErrors) && "border-destructive"
+        ),
+        children: [
+          empty ? /* @__PURE__ */ jsx31("span", { className: "truncate", children: placeholder || "Select..." }) : /* @__PURE__ */ jsx31(
+            Entries,
+            {
+              entries,
+              field,
+              shown,
+              onRemove: answers.remove
+            }
+          ),
+          /* @__PURE__ */ jsx31(
+            TriggerIcons3,
+            {
+              loading: options.loading,
+              onClear: !empty && !required ? clear : void 0
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx31(
+      PopoverContent3,
+      {
+        className: "w-[--radix-popover-trigger-width] p-0",
+        align: "start",
+        children: /* @__PURE__ */ jsx31(
+          HitList,
+          {
+            options,
+            selected: new Set(entries.map(entryKey)),
+            freeText: freeTextOf(options, takesText(field, binding)),
+            onPick: (hit) => {
+              answers.pick(hit);
+              done();
+            },
+            onFreeText: (typed) => {
+              answers.takeText(typed);
+              done();
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function ReadonlyCodedValue({
+  state,
+  service,
+  note
+}) {
+  const shown = {
+    binding: state.binding,
+    service,
+    picked: /* @__PURE__ */ new Map(),
+    lookup: state.storesCodes
+  };
+  return /* @__PURE__ */ jsxs20("div", { className: "space-y-1", children: [
+    state.entries.length ? /* @__PURE__ */ jsx31(Entries, { entries: state.entries, field: state.field, shown }) : /* @__PURE__ */ jsx31("span", { className: "text-sm text-muted-foreground", children: EMPTY_VALUE }),
+    note && /* @__PURE__ */ jsx31("p", { className: "text-xs text-muted-foreground", children: note })
+  ] });
+}
+function readonlyNote(state, service) {
+  if (!state.binding) return "No list is bound to this field.";
+  if (!service) return "No terminology service is available.";
+  return void 0;
+}
+function ListWarningsText({
+  warnings
+}) {
+  if (warnings.size === 0) return null;
+  return /* @__PURE__ */ jsx31("div", { className: "space-y-0.5", children: [...warnings].map(([key, message]) => /* @__PURE__ */ jsxs20(
+    "p",
+    {
+      className: "flex items-center gap-1 text-xs text-amber-600 dark:text-amber-400",
+      children: [
+        /* @__PURE__ */ jsx31(TriangleAlert, { className: "h-3 w-3 shrink-0" }),
+        message
+      ]
+    },
+    key
+  )) });
+}
+function CodedValueBody({
+  props,
+  state,
+  service
+}) {
+  const note = readonlyNote(state, service);
+  if (props.disabled || props.readonly || note || !service)
+    return /* @__PURE__ */ jsx31(
+      ReadonlyCodedValue,
+      {
+        state,
+        service,
+        note: props.disabled || props.readonly ? void 0 : note
+      }
+    );
+  return /* @__PURE__ */ jsx31(EditableCodedValue, { props, state, service });
+}
+function CodedValueField({
+  props
+}) {
+  const service = useTerminology();
+  const state = fieldStateOf(props);
+  const warnings = useListCheck(
+    service,
+    state.binding,
+    state.entries.flatMap((e) => e.coding ? [e.coding] : []),
+    state.storesCodes
+  );
+  return /* @__PURE__ */ jsxs20("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx31(CodedValueBody, { props, state, service }),
+    /* @__PURE__ */ jsx31(ListWarningsText, { warnings })
+  ] });
+}
+function CodedValueWidget(props) {
+  return /* @__PURE__ */ jsx31(
+    FormFieldWrapper,
+    {
+      inputId: props.id,
+      label: props.label,
+      description: props.description,
+      required: props.required,
+      error: firstError(props.rawErrors),
+      children: /* @__PURE__ */ jsx31(CodedValueField, { props })
+    }
+  );
+}
+
+// src/widgets/CodeableConceptWidget.tsx
+import * as React14 from "react";
+import { Plus as Plus4, X as X6 } from "lucide-react";
+import { cn as cn13 } from "@petrarca/sonnet-core";
+import {
+  bindingLists,
+  bindingOf as bindingOf2,
+  CODING_TYPE,
+  codingKey as codingKey6,
+  codingsByList as codingsByList2,
+  conceptOf as conceptOf2,
+  listTitle
+} from "@petrarca/sonnet-core/schema";
+import {
+  useTerminology as useTerminology2
+} from "@petrarca/sonnet-core/terminology";
+import {
+  Badge as Badge5,
+  Button as Button8,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Popover as Popover4,
+  PopoverAnchor,
+  PopoverContent as PopoverContent4
+} from "@petrarca/sonnet-ui";
+
+// src/widgets/codeableConcept/conceptModel.ts
+import {
+  codingsByList,
+  conceptOf
+} from "@petrarca/sonnet-core/schema";
+function valueOf(codings, text) {
+  const t = text?.trim() ? text : void 0;
+  if (codings.length === 0 && !t) return void 0;
+  return {
+    ...codings.length ? { codings } : {},
+    ...t ? { text: t } : {}
+  };
+}
+function withRow(value, lists, row, coding) {
+  return withCoding(
+    value,
+    lists,
+    row,
+    coding && { ...coding, userSelected: true }
+  );
+}
+function withSuggested(value, lists, row, suggestion) {
+  if (codingsByList(value, lists).byList[row]) return conceptOf(value);
+  const { coding, match } = suggestion;
+  return withCoding(value, lists, row, {
+    ...coding,
+    ...match ? { match } : {}
+  });
+}
+function withCoding(value, lists, row, coding) {
+  const { byList: rows, others } = codingsByList(value, lists);
+  const purpose = lists[row]?.purpose;
+  const next = rows.map(
+    (c, i) => i !== row ? c : coding && { ...coding, ...purpose ? { purpose } : {} }
+  );
+  return valueOf(
+    [...next.filter((c) => !!c), ...others],
+    conceptOf(value).text
+  );
+}
+function withText(value, text) {
+  return valueOf(conceptOf(value).codings ?? [], text);
+}
+
+// src/widgets/CodeableConceptWidget.tsx
+import { jsx as jsx32, jsxs as jsxs21 } from "react/jsx-runtime";
+function listSchema(list) {
+  const { valueSet, system, version } = list;
+  return {
+    ...CODING_TYPE.definition,
+    "x-binding": {
+      ...valueSet ? { valueSet } : {},
+      ...system ? { system } : {},
+      ...version ? { version } : {},
+      strength: "required"
+    }
+  };
+}
+var AS_CODING = {
+  multiple: false,
+  shape: "coding",
+  store: "code",
+  keep: []
+};
+function offersText(props, extensible) {
+  const text = props.options?.text;
+  return typeof text === "boolean" ? text : extensible;
+}
+function CodingChip({
+  label,
+  coding,
+  onOpen,
+  onRemove
+}) {
+  const mapped = coding.match !== void 0 && !coding.userSelected;
+  return /* @__PURE__ */ jsxs21(
+    Badge5,
+    {
+      variant: "secondary",
+      className: cn13("gap-1 font-normal", onOpen && "cursor-pointer"),
+      title: coding.display ?? coding.code,
+      onClick: onOpen,
+      children: [
+        /* @__PURE__ */ jsx32("span", { className: "text-muted-foreground", children: label }),
+        /* @__PURE__ */ jsx32("span", { className: "font-mono text-xs", children: coding.code }),
+        mapped && /* @__PURE__ */ jsx32("span", { className: "text-muted-foreground", children: "\xB7 mapped" }),
+        onRemove && /* @__PURE__ */ jsx32(InlineIconButton, { label: `Remove ${label}`, onAct: onRemove, children: /* @__PURE__ */ jsx32(X6, { className: "h-3 w-3" }) })
+      ]
+    }
+  );
+}
+function MissingChip({
+  label,
+  onOpen
+}) {
+  return /* @__PURE__ */ jsxs21(
+    Badge5,
+    {
+      variant: "outline",
+      className: cn13(
+        "gap-1 border-dashed font-normal text-muted-foreground",
+        onOpen && "cursor-pointer"
+      ),
+      onClick: onOpen,
+      children: [
+        label,
+        /* @__PURE__ */ jsx32("span", { className: "text-destructive", children: "*" })
+      ]
+    }
+  );
+}
+function ListSearch({
+  list,
+  props,
+  selected,
+  onPick
+}) {
+  const service = useTerminology2();
+  const ref = useListRef({ ...list, strength: "required" });
+  const options = useCodedValueOptions(
+    service,
+    ref,
+    modeOption(props.options),
+    minCharsOption(props.options)
+  );
+  return /* @__PURE__ */ jsxs21("div", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsx32("p", { className: "px-2 pt-2 text-xs font-medium text-muted-foreground", children: listTitle(list) }),
+    /* @__PURE__ */ jsx32(
+      HitList,
+      {
+        options,
+        selected: new Set(selected ? [codingKey6(selected)] : []),
+        onPick,
+        onFreeText: () => void 0
+      }
+    )
+  ] });
+}
+function AddCoding({
+  lists,
+  onOpen
+}) {
+  const chosen = React14.useRef(null);
+  if (lists.length === 0) return null;
+  return /* @__PURE__ */ jsxs21(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx32(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs21(
+      Button8,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 gap-1 px-2 text-xs",
+        children: [
+          /* @__PURE__ */ jsx32(Plus4, { className: "h-3 w-3" }),
+          "Coding"
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx32(
+      DropdownMenuContent,
+      {
+        align: "start",
+        onCloseAutoFocus: (e) => {
+          if (chosen.current === null) return;
+          e.preventDefault();
+          onOpen(chosen.current);
+          chosen.current = null;
+        },
+        children: lists.map(([list, row]) => /* @__PURE__ */ jsx32(DropdownMenuItem, { onSelect: () => chosen.current = row, children: listTitle(list) }, row))
+      }
+    )
+  ] });
+}
+function ListChip({
+  list,
+  row,
+  coding,
+  open,
+  set
+}) {
+  const onOpen = open && (() => open(row));
+  if (coding)
+    return /* @__PURE__ */ jsx32(
+      CodingChip,
+      {
+        label: listTitle(list),
+        coding,
+        onOpen,
+        onRemove: set && (() => set(row, void 0))
+      }
+    );
+  return list.required ? /* @__PURE__ */ jsx32(MissingChip, { label: listTitle(list), onOpen }) : null;
+}
+function ChipLine({ lists, rows, others, open, set, addText }) {
+  const addable = lists.map((l, i) => [l, i]).filter(([l, i]) => i > 0 && !rows[i] && !l.required);
+  return /* @__PURE__ */ jsxs21("div", { className: "flex flex-wrap items-center gap-1", children: [
+    lists.slice(1).map((list, k) => /* @__PURE__ */ jsx32(
+      ListChip,
+      {
+        list,
+        row: k + 1,
+        coding: rows[k + 1],
+        open,
+        set
+      },
+      k + 1
+    )),
+    others.map((c) => /* @__PURE__ */ jsx32(CodingChip, { label: listTitle(c), coding: c }, codingKey6(c))),
+    open && /* @__PURE__ */ jsx32(AddCoding, { lists: addable, onOpen: open }),
+    addText && /* @__PURE__ */ jsxs21(
+      Button8,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "h-6 gap-1 px-2 text-xs",
+        onClick: addText,
+        children: [
+          /* @__PURE__ */ jsx32(Plus4, { className: "h-3 w-3" }),
+          "Text"
+        ]
+      }
+    )
+  ] });
+}
+function useConcept(props) {
+  const binding = bindingOf2(props.propertySchema);
+  const lists = binding ? bindingLists(binding) : [];
+  const text = conceptOf2(props.value).text ?? "";
+  const [editing, setEditing] = React14.useState(null);
+  const [showText, setShowText] = React14.useState(false);
+  const offered = offersText(props, binding?.strength === "extensible");
+  const { byList: rows, others } = codingsByList2(props.value, lists);
+  return {
+    lists,
+    rows,
+    others,
+    text,
+    editing,
+    setEditing,
+    textShown: offered && (showText || text !== ""),
+    textAsked: showText,
+    addText: offered && !showText && text === "" ? () => setShowText(true) : void 0
+  };
+}
+function useLatestValue(props) {
+  const latest = React14.useRef(props.value);
+  latest.current = props.value;
+  return {
+    get: () => latest.current,
+    change: (next) => {
+      latest.current = next;
+      props.onChange(next);
+    }
+  };
+}
+function useSuggestions(lists, { get, change }) {
+  const service = useTerminology2();
+  return (coding) => {
+    if (!coding || !service?.translate) return;
+    const { system, code, version } = coding;
+    const empty = codingsByList2(get(), lists).byList.flatMap(
+      (c, row) => row > 0 && !c ? [row] : []
+    );
+    for (const row of empty)
+      service.translate({
+        coding: { system, code, ...version ? { version } : {} },
+        targets: [lists[row]]
+      }).then(([first]) => {
+        if (first) change(withSuggested(get(), lists, row, first));
+      }).catch(() => void 0);
+  };
 }
-function parseQuantityOptions(options) {
-  const units = Array.isArray(options.units) ? options.units.filter(isUnitOption) : [];
-  const precision = typeof options.precision === "number" ? options.precision : void 0;
-  const step = typeof options.step === "number" ? options.step : void 0;
-  const unitPosition = options.unitPosition === "prefix" || options.unitPosition === "suffix" ? options.unitPosition : void 0;
-  return { units, precision, step, unitPosition };
+function CodeableConceptWidget(props) {
+  const { id, value, onBlur } = props;
+  const c = useConcept(props);
+  const editable = !props.disabled && !props.readonly;
+  const blur = () => onBlur?.(id, value);
+  const latest = useLatestValue(props);
+  const suggest = useSuggestions(c.lists, latest);
+  const set = (row, coding) => {
+    latest.change(withRow(latest.get(), c.lists, row, coding));
+    if (row === 0) suggest(coding);
+  };
+  const editingList = c.editing !== null ? c.lists[c.editing] : void 0;
+  return /* @__PURE__ */ jsx32(
+    FormFieldWrapper,
+    {
+      inputId: id,
+      label: props.label,
+      description: props.description,
+      required: props.required,
+      error: firstError(props.rawErrors),
+      children: /* @__PURE__ */ jsxs21("div", { className: "space-y-1.5", children: [
+        /* @__PURE__ */ jsx32(
+          FirstList,
+          {
+            props,
+            lists: c.lists,
+            coding: c.rows[0],
+            set,
+            blur
+          }
+        ),
+        /* @__PURE__ */ jsxs21(
+          Popover4,
+          {
+            open: editingList !== void 0,
+            onOpenChange: (o) => {
+              if (o) return;
+              c.setEditing(null);
+              blur();
+            },
+            children: [
+              /* @__PURE__ */ jsx32(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx32("div", { children: /* @__PURE__ */ jsx32(
+                ChipLine,
+                {
+                  lists: c.lists,
+                  rows: c.rows,
+                  others: c.others,
+                  open: editable ? c.setEditing : void 0,
+                  set: editable ? set : void 0,
+                  addText: editable ? c.addText : void 0
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx32(
+                PopoverContent4,
+                {
+                  className: "w-[--radix-popover-trigger-width] min-w-72 p-0",
+                  align: "start",
+                  children: editingList && c.editing !== null && /* @__PURE__ */ jsx32(
+                    ListSearch,
+                    {
+                      list: editingList,
+                      props,
+                      selected: c.rows[c.editing],
+                      onPick: (hit) => {
+                        set(
+                          c.editing,
+                          toStored(hit, AS_CODING, void 0)
+                        );
+                        c.setEditing(null);
+                      }
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        c.textShown && /* @__PURE__ */ jsx32(
+          FormInput,
+          {
+            id: `${id}-text`,
+            label: "Text",
+            value: c.text,
+            placeholder: "In words, as the person said it",
+            disabled: props.disabled,
+            readOnly: props.readonly,
+            onChange: (e) => latest.change(withText(latest.get(), e.target.value)),
+            onBlur: blur,
+            autoFocus: c.textAsked
+          }
+        )
+      ] })
+    }
+  );
 }
-function QuantityWidget({
-  id,
-  name,
-  value,
-  onChange,
-  onBlur,
-  propertySchema,
-  required,
-  disabled,
-  readonly,
-  rawErrors,
-  label,
-  description,
-  placeholder,
-  autofocus,
-  options = {}
+function FirstList({
+  props,
+  lists,
+  coding,
+  set,
+  blur
 }) {
-  const error = firstError(rawErrors);
-  const {
-    units,
-    precision,
-    step,
-    unitPosition: unitPositionOpt
-  } = parseQuantityOptions(options);
-  const quantityValue = value != null && typeof value === "object" && !Array.isArray(value) ? value : void 0;
-  const valueRef = useRef4(value);
-  valueRef.current = value;
-  const handleBlur = useCallback6(() => {
-    onBlur?.(id, valueRef.current);
-  }, [id, onBlur]);
-  return /* @__PURE__ */ jsx25(
-    FormQuantityInput,
+  if (!lists[0])
+    return /* @__PURE__ */ jsx32("p", { className: "text-sm text-muted-foreground", children: "No list is bound to this field." });
+  return /* @__PURE__ */ jsx32(
+    CodedValueWidget,
     {
-      id,
-      name,
-      value: quantityValue,
-      onChange,
-      onBlur: handleBlur,
-      units,
-      unitPosition: unitPositionOpt,
-      precision,
-      step,
-      min: propertySchema.minimum,
-      max: propertySchema.maximum,
-      label,
-      labelPlacement: options?.labelPlacement,
-      description,
-      error,
-      placeholder,
-      required,
-      disabled,
-      readOnly: readonly,
-      autoFocus: autofocus
+      ...props,
+      label: "",
+      description: void 0,
+      rawErrors: void 0,
+      propertySchema: listSchema(lists[0]),
+      value: coding,
+      onChange: (next) => set(0, next),
+      onBlur: blur
     }
   );
 }
 
 // src/widgets/DateWidget.tsx
 import { DateInput } from "@petrarca/sonnet-ui";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function resolvePrecision(value) {
   return value === "year" || value === "month" ? value : "day";
 }
@@ -2752,12 +4414,13 @@ function DateWidget({
   label,
   description,
   placeholder,
-  options
+  options,
+  propertySchema
 }) {
   const error = firstError(rawErrors);
   const precision = resolvePrecision(options?.precision);
   const locale = typeof options?.locale === "string" ? options.locale : void 0;
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx33(
     FormFieldWrapper,
     {
       inputId: id,
@@ -2765,7 +4428,7 @@ function DateWidget({
       description,
       required,
       labelPlacement: options?.labelPlacement,
-      children: /* @__PURE__ */ jsx26(
+      children: /* @__PURE__ */ jsx33(
         DateInput,
         {
           id,
@@ -2777,7 +4440,9 @@ function DateWidget({
           placeholder,
           required,
           disabled,
-          error
+          error,
+          min: propertySchema.formatMinimum,
+          max: propertySchema.formatMaximum
         }
       )
     }
@@ -2786,7 +4451,7 @@ function DateWidget({
 
 // src/widgets/TimeWidget.tsx
 import { TimeInput } from "@petrarca/sonnet-ui";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 function resolveGranularity(value) {
   return value === "second" ? "second" : "minute";
 }
@@ -2805,7 +4470,7 @@ function TimeWidget({
 }) {
   const error = firstError(rawErrors);
   const granularity = resolveGranularity(options?.granularity);
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx34(
     FormFieldWrapper,
     {
       inputId: id,
@@ -2813,7 +4478,7 @@ function TimeWidget({
       description,
       required,
       labelPlacement: options?.labelPlacement,
-      children: /* @__PURE__ */ jsx27(
+      children: /* @__PURE__ */ jsx34(
         TimeInput,
         {
           id,
@@ -2833,7 +4498,7 @@ function TimeWidget({
 
 // src/widgets/DateTimeWidget.tsx
 import { DateTimeInput } from "@petrarca/sonnet-ui";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function resolveGranularity2(value) {
   return value === "second" ? "second" : "minute";
 }
@@ -2847,13 +4512,14 @@ function DateTimeWidget({
   rawErrors,
   label,
   description,
-  options
+  options,
+  propertySchema
 }) {
   const error = firstError(rawErrors);
   const granularity = resolveGranularity2(options?.granularity);
   const timeZone = typeof options?.timeZone === "string" ? options.timeZone : void 0;
   const locale = typeof options?.locale === "string" ? options.locale : void 0;
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx35(
     FormFieldWrapper,
     {
       inputId: id,
@@ -2861,7 +4527,7 @@ function DateTimeWidget({
       description,
       required,
       labelPlacement: options?.labelPlacement,
-      children: /* @__PURE__ */ jsx28(
+      children: /* @__PURE__ */ jsx35(
         DateTimeInput,
         {
           idPrefix: id,
@@ -2873,7 +4539,9 @@ function DateTimeWidget({
           locale,
           required,
           disabled,
-          error
+          error,
+          min: propertySchema.formatMinimum,
+          max: propertySchema.formatMaximum
         }
       )
     }
@@ -2881,20 +4549,20 @@ function DateTimeWidget({
 }
 
 // src/widgets/DisplayWidget.tsx
-import { jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 function DisplayWidget({
   label,
   description
 }) {
   if (!label && !description) return null;
-  return /* @__PURE__ */ jsxs17("div", { className: "space-y-1", children: [
-    label && /* @__PURE__ */ jsx29("p", { className: "text-sm text-foreground", children: label }),
-    description && /* @__PURE__ */ jsx29("p", { className: "text-sm text-muted-foreground", children: description })
+  return /* @__PURE__ */ jsxs22("div", { className: "space-y-1", children: [
+    label && /* @__PURE__ */ jsx36("p", { className: "text-sm text-foreground", children: label }),
+    description && /* @__PURE__ */ jsx36("p", { className: "text-sm text-muted-foreground", children: description })
   ] });
 }
 
 // src/widgets/OneOfWidget.tsx
-import { useMemo as useMemo6 } from "react";
+import { useMemo as useMemo8 } from "react";
 import {
   getDiscriminator,
   getBranchValue,
@@ -2909,7 +4577,7 @@ import {
   SelectContent,
   SelectItem
 } from "@petrarca/sonnet-ui";
-import { jsx as jsx30, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
 function buildChoices(branches, discriminator) {
   return branches.map((branch, index) => {
     const raw = discriminator ? getBranchValue(branch, discriminator) : void 0;
@@ -2945,15 +4613,20 @@ function BranchSelector({
   disabled,
   onSelect
 }) {
-  return /* @__PURE__ */ jsxs18("div", { className: "space-y-1", children: [
-    label && /* @__PURE__ */ jsx30(Label, { htmlFor: id, children: label }),
-    /* @__PURE__ */ jsxs18(Select, { value: activeValue, onValueChange: onSelect, disabled, children: [
-      /* @__PURE__ */ jsx30(SelectTrigger, { id, children: /* @__PURE__ */ jsx30(SelectValue, { placeholder: "Select an option" }) }),
-      /* @__PURE__ */ jsx30(SelectContent, { children: choices.map((c) => /* @__PURE__ */ jsx30(SelectItem, { value: c.value, children: c.label }, c.value)) })
+  return /* @__PURE__ */ jsxs23("div", { className: "space-y-1", children: [
+    label && /* @__PURE__ */ jsx37(Label, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsxs23(Select, { value: activeValue, onValueChange: onSelect, disabled, children: [
+      /* @__PURE__ */ jsx37(SelectTrigger, { id, children: /* @__PURE__ */ jsx37(SelectValue, { placeholder: "Select an option" }) }),
+      /* @__PURE__ */ jsx37(SelectContent, { children: choices.map((c) => /* @__PURE__ */ jsx37(SelectItem, { value: c.value, children: c.label }, c.value)) })
     ] }),
-    description && /* @__PURE__ */ jsx30("p", { className: "text-sm text-muted-foreground", children: description })
+    description && /* @__PURE__ */ jsx37("p", { className: "text-sm text-muted-foreground", children: description })
   ] });
 }
+function branchUiSchema(uiSchema, discriminator) {
+  const fields = uiSchema?.["x-ui-fields"] ?? {};
+  if (!discriminator) return fields;
+  return { [discriminator]: { "x-ui-options": { hidden: true } }, ...fields };
+}
 function resolveActive(propertySchema, branches, choices, discriminator, data) {
   const index = findActiveBranch(propertySchema, data, discriminator);
   if (index < 0) return { value: "", label: "", subSchema: null };
@@ -2978,12 +4651,12 @@ function OneOfWidget({
 }) {
   const { renderer: Renderer, templates } = useNestedFormContext();
   const ContainerTemplate = templates.ObjectContainerTemplate ?? DefaultObjectContainerTemplate;
-  const branches = useMemo6(() => propertySchema.oneOf ?? [], [propertySchema]);
-  const discriminator = useMemo6(
+  const branches = useMemo8(() => propertySchema.oneOf ?? [], [propertySchema]);
+  const discriminator = useMemo8(
     () => getDiscriminator(propertySchema),
     [propertySchema]
   );
-  const choices = useMemo6(
+  const choices = useMemo8(
     () => buildChoices(branches, discriminator),
     [branches, discriminator]
   );
@@ -2996,9 +4669,9 @@ function OneOfWidget({
     data
   );
   if (branches.length === 0) return null;
-  const subUiSchema = uiSchema?.["x-ui-fields"] ?? {};
-  return /* @__PURE__ */ jsxs18("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx30(
+  const subUiSchema = branchUiSchema(uiSchema, discriminator);
+  return /* @__PURE__ */ jsxs23("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx37(
       BranchSelector,
       {
         id,
@@ -3010,14 +4683,14 @@ function OneOfWidget({
         onSelect: (selected) => onChange(branchChangeData(choices, branches, discriminator, selected))
       }
     ),
-    active.subSchema && /* @__PURE__ */ jsx30(
+    active.subSchema && /* @__PURE__ */ jsx37(
       ContainerTemplate,
       {
         label: active.label,
         description: void 0,
         variant: options?.variant || "section",
         defaultOpen: true,
-        children: /* @__PURE__ */ jsx30(
+        children: /* @__PURE__ */ jsx37(
           Renderer,
           {
             schema: active.subSchema,
@@ -3035,8 +4708,304 @@ function OneOfWidget({
   ] });
 }
 
+// src/widgets/RadioWidget.tsx
+import { RadioGroup, RadioGroupItem } from "@petrarca/sonnet-ui";
+import { cn as cn14 } from "@petrarca/sonnet-core";
+import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
+function RadioWidget({
+  id,
+  name,
+  value,
+  onChange,
+  onBlur,
+  propertySchema,
+  required,
+  disabled,
+  readonly,
+  rawErrors,
+  label,
+  description,
+  options
+}) {
+  const choices = buildSelectOptions(propertySchema, options?.enumNames ?? {});
+  const horizontal = options?.orientation === "horizontal";
+  return /* @__PURE__ */ jsx38(
+    FormFieldWrapper,
+    {
+      inputId: id,
+      label,
+      description,
+      error: firstError(rawErrors),
+      required,
+      compact: options?.compact,
+      children: /* @__PURE__ */ jsx38(
+        RadioGroup,
+        {
+          id,
+          name,
+          value: value === void 0 || value === null ? "" : String(value),
+          onValueChange: (v) => onChange(v),
+          onBlur: () => onBlur?.(id, value),
+          disabled: disabled || readonly,
+          required,
+          className: cn14(horizontal && "flex flex-wrap gap-4"),
+          children: choices.map((c) => /* @__PURE__ */ jsxs24("label", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx38(RadioGroupItem, { value: c.value, id: `${id}-${c.value}` }),
+            c.label
+          ] }, c.value))
+        }
+      )
+    }
+  );
+}
+
+// src/widgets/CheckboxGroupWidget.tsx
+import { Checkbox as Checkbox2 } from "@petrarca/sonnet-ui";
+import { cn as cn15 } from "@petrarca/sonnet-core";
+import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
+function CheckboxGroupWidget({
+  id,
+  value,
+  onChange,
+  onBlur,
+  propertySchema,
+  required,
+  disabled,
+  readonly,
+  rawErrors,
+  label,
+  description,
+  options
+}) {
+  const choices = buildSelectOptions(propertySchema, options?.enumNames ?? {});
+  const chosen = new Set(Array.isArray(value) ? value.map(String) : []);
+  const toggle = (v, on) => {
+    const next = choices.map((c) => c.value).filter((c) => c === v ? on : chosen.has(c));
+    onChange(next);
+  };
+  return /* @__PURE__ */ jsx39(
+    FormFieldWrapper,
+    {
+      inputId: id,
+      label,
+      description,
+      error: firstError(rawErrors),
+      required,
+      compact: options?.compact,
+      children: /* @__PURE__ */ jsx39(
+        "div",
+        {
+          id,
+          role: "group",
+          className: cn15(
+            "grid gap-2",
+            options?.orientation === "horizontal" && "flex flex-wrap gap-4"
+          ),
+          onBlur: () => onBlur?.(id, value),
+          children: choices.map((c) => /* @__PURE__ */ jsxs25("label", { className: "flex items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsx39(
+              Checkbox2,
+              {
+                id: `${id}-${c.value}`,
+                checked: chosen.has(c.value),
+                onCheckedChange: (on) => toggle(c.value, on === true),
+                disabled: disabled || readonly
+              }
+            ),
+            c.label
+          ] }, c.value))
+        }
+      )
+    }
+  );
+}
+
+// src/widgets/ChoiceWithTextWidget.tsx
+import { jsx as jsx40 } from "react/jsx-runtime";
+var ROW_LAYOUT = {
+  rows: [{ fields: ["choice", "text"], widths: ["md", "full"] }]
+};
+function textTitleOf(prop) {
+  const text = prop.properties?.text ?? prop.allOf?.[0]?.then?.properties?.text;
+  return text?.title;
+}
+function containerUiSchema(props) {
+  const fields = props.uiSchema?.["x-ui-fields"] ?? {};
+  const textTitle = textTitleOf(props.propertySchema);
+  const layout = props.uiSchema?.["x-ui-layout"];
+  return {
+    ...props.uiSchema,
+    "x-ui-layout": layout ?? ROW_LAYOUT,
+    "x-ui-fields": {
+      ...fields,
+      choice: { "x-ui-title": false, ...fields.choice },
+      text: {
+        "x-ui-title": false,
+        ...textTitle ? { "x-ui-placeholder": textTitle } : {},
+        ...fields.text
+      }
+    }
+  };
+}
+function ChoiceWithTextWidget(props) {
+  return /* @__PURE__ */ jsx40(
+    FormFieldWrapper,
+    {
+      inputId: props.id,
+      label: props.label,
+      description: props.description,
+      required: props.required,
+      compact: props.options?.compact,
+      children: /* @__PURE__ */ jsx40(
+        ObjectWidget,
+        {
+          ...props,
+          uiSchema: containerUiSchema(props),
+          options: { ...props.options, variant: "inline" }
+        }
+      )
+    }
+  );
+}
+
+// src/widgets/AbsentReasonsWidget.tsx
+import {
+  Button as Button9,
+  IconButton as IconButton2,
+  Select as Select2,
+  SelectContent as SelectContent2,
+  SelectItem as SelectItem2,
+  SelectTrigger as SelectTrigger2,
+  SelectValue as SelectValue2
+} from "@petrarca/sonnet-ui";
+import { Plus as Plus5, X as X7 } from "lucide-react";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
+function Pick({
+  label,
+  value,
+  items,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ jsxs26(Select2, { value: value || void 0, onValueChange: onChange, children: [
+    /* @__PURE__ */ jsx41(SelectTrigger2, { "aria-label": label, className, children: /* @__PURE__ */ jsx41(SelectValue2, { placeholder: label.toLowerCase() }) }),
+    /* @__PURE__ */ jsx41(SelectContent2, { children: items.map((i) => /* @__PURE__ */ jsx41(SelectItem2, { value: i.value, children: i.label }, i.value)) })
+  ] });
+}
+function questionsOf(props) {
+  return Object.entries(props.schema.properties ?? {}).filter(([key, p]) => key !== props.name && p.type !== "null").map(([key, p]) => ({ value: key, label: p.title ?? key }));
+}
+function ReasonRow({
+  questionKey,
+  reason,
+  given,
+  questions,
+  reasons,
+  locked,
+  set
+}) {
+  const { [questionKey]: _, ...rest } = given;
+  return /* @__PURE__ */ jsxs26("div", { className: "group/row flex items-center gap-1.5 px-1.5 py-1", children: [
+    /* @__PURE__ */ jsx41(
+      Pick,
+      {
+        label: "Question",
+        value: questionKey,
+        items: questions.filter(
+          (q) => q.value === questionKey || !(q.value in given)
+        ),
+        onChange: (next) => set({ ...rest, [next]: reason }),
+        className: "h-7 min-w-0 flex-1 text-xs"
+      }
+    ),
+    /* @__PURE__ */ jsx41(
+      Pick,
+      {
+        label: "Reason",
+        value: reason,
+        items: reasons,
+        onChange: (r) => set({ ...given, [questionKey]: r }),
+        className: "h-7 w-40 shrink-0 text-xs"
+      }
+    ),
+    !locked && /* @__PURE__ */ jsx41(
+      IconButton2,
+      {
+        label: "Answer it after all",
+        revealOnHover: true,
+        onClick: () => set(rest),
+        children: /* @__PURE__ */ jsx41(X7, {})
+      }
+    )
+  ] });
+}
+function reasonsState(props) {
+  const { value, readonly, disabled, options } = props;
+  const additional = props.propertySchema.additionalProperties;
+  const reasons = buildSelectOptions(
+    additional ?? {},
+    options?.enumNames ?? {}
+  );
+  const given = value && typeof value === "object" ? value : {};
+  const questions = questionsOf(props);
+  const free = questions.filter((q) => !(q.value in given));
+  const locked = readonly || disabled;
+  return {
+    reasons,
+    given,
+    questions,
+    free,
+    locked,
+    canAdd: !locked && free.length > 0 && reasons.length > 0
+  };
+}
+function AbsentReasonsWidget(props) {
+  const { id, onChange, label, rawErrors, options } = props;
+  const { reasons, given, questions, free, locked, canAdd } = reasonsState(props);
+  const set = (next) => onChange(Object.keys(next).length ? next : void 0);
+  return /* @__PURE__ */ jsx41(
+    FormFieldWrapper,
+    {
+      inputId: id,
+      label,
+      error: firstError(rawErrors),
+      compact: options?.compact,
+      children: /* @__PURE__ */ jsxs26("div", { className: "space-y-1.5", children: [
+        Object.keys(given).length > 0 && /* @__PURE__ */ jsx41("div", { className: "rounded-md border divide-y", children: Object.entries(given).map(([key, reason]) => /* @__PURE__ */ jsx41(
+          ReasonRow,
+          {
+            questionKey: key,
+            reason,
+            given,
+            questions,
+            reasons,
+            locked,
+            set
+          },
+          key
+        )) }),
+        canAdd && /* @__PURE__ */ jsxs26(
+          Button9,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 gap-1 px-2 text-xs",
+            onClick: () => set({ ...given, [free[0].value]: reasons[0].value }),
+            children: [
+              /* @__PURE__ */ jsx41(Plus5, { className: "h-3.5 w-3.5" }),
+              "Leave a question unanswered"
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
 // src/widgets/widgetResolver.ts
 import {
+  bindingOf as bindingOf3,
   isNullableBoolean as isNullableBoolean2,
   isOneOf,
   extractEnumValues as extractEnumValues2,
@@ -3113,20 +5082,45 @@ function resolveFromUiWidget(uiWidget, propertySchema, registry) {
 function isObjectArraySchema(schema) {
   return schema.type === "array" && schema.items?.type === "object" && !!schema.items?.properties;
 }
+function isStringArraySchema(schema) {
+  return schema.type === "array" && schema.items?.type === "string" && !Array.isArray(schema.items?.enum);
+}
+function isStringMapSchema(schema) {
+  const extra = schema.additionalProperties;
+  return schema.type === "object" && !schema.properties && typeof extra === "object" && extra !== null && extra.type === "string";
+}
+function isEnumArraySchema(schema) {
+  return schema.type === "array" && Array.isArray(schema.items?.enum);
+}
+function isCodedShape(schema) {
+  return schema.type === "string" || schema.type === "array" || !!schema.anyOf;
+}
 function registryLookup(registry, widgetName) {
   return registry[widgetName] || registry["TextInputWidget"];
 }
+function objectWidgetName(schema) {
+  if (schema.properties) return "ObjectWidget";
+  if (isStringMapSchema(schema)) return "KeyValueWidget";
+  return "JsonEditorWidget";
+}
+function arrayWidgetName(schema) {
+  if (isObjectArraySchema(schema)) return "ArrayWidget";
+  if (isEnumArraySchema(schema)) return "SelectWidget";
+  if (isStringArraySchema(schema)) return "TagsInputWidget";
+  return null;
+}
 function resolveFromSchemaStructure(schema, registry) {
   if (isOneOf(schema)) return registryLookup(registry, "OneOfWidget");
   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;
+  if (bindingOf3(schema) && isCodedShape(schema))
+    return registryLookup(registry, "CodedValueWidget");
+  if (schema.type === "object")
+    return registryLookup(registry, objectWidgetName(schema));
+  const arrayWidget = arrayWidgetName(schema);
+  return arrayWidget ? registryLookup(registry, arrayWidget) : null;
 }
 function resolveFromTypeFormat(schema, registry) {
   const type = getFieldType(schema);
@@ -3157,15 +5151,22 @@ var DEFAULT_WIDGETS = {
   SelectWidget,
   TagsInputWidget,
   JsonEditorWidget,
+  KeyValueWidget,
   EntitySelectWidget,
   ObjectWidget,
   ArrayWidget,
   QuantityWidget,
+  CodedValueWidget,
+  CodeableConceptWidget,
   DateWidget,
   TimeWidget,
   DateTimeWidget,
   DisplayWidget,
   OneOfWidget,
+  RadioWidget,
+  CheckboxGroupWidget,
+  ChoiceWithTextWidget,
+  AbsentReasonsWidget,
   // Lowercase aliases for x-ui-widget convenience
   text: TextInputWidget,
   textarea: TextareaWidget,
@@ -3174,21 +5175,28 @@ var DEFAULT_WIDGETS = {
   select: SelectWidget,
   tags: TagsInputWidget,
   "json-editor": JsonEditorWidget,
+  "key-value": KeyValueWidget,
   "entity-select": EntitySelectWidget,
   object: ObjectWidget,
   array: ArrayWidget,
   quantity: QuantityWidget,
+  "coded-value": CodedValueWidget,
+  "codeable-concept": CodeableConceptWidget,
   date: DateWidget,
   time: TimeWidget,
   "date-time": DateTimeWidget,
   display: DisplayWidget,
-  "one-of": OneOfWidget
+  "one-of": OneOfWidget,
+  radio: RadioWidget,
+  "checkbox-group": CheckboxGroupWidget,
+  "choice-with-text": ChoiceWithTextWidget,
+  "absent-reasons": AbsentReasonsWidget
 };
 
 // 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 jsx31, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Button as Button10 } from "@petrarca/sonnet-ui";
+import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 function HorizontalArrayItemTemplate({
   children,
   index,
@@ -3212,7 +5220,7 @@ function HorizontalArrayItemTemplate({
   );
   const gap = resolvedLayout.gap ?? 8;
   const alignItems = resolvedLayout.compact ? "center" : "start";
-  return /* @__PURE__ */ jsxs19(
+  return /* @__PURE__ */ jsxs27(
     "div",
     {
       "data-fid": fid,
@@ -3224,9 +5232,9 @@ function HorizontalArrayItemTemplate({
       },
       children: [
         children,
-        orderable && /* @__PURE__ */ jsxs19("div", { className: "flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ jsx31(
-            Button6,
+        orderable && /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ jsx42(
+            Button10,
             {
               type: "button",
               variant: "ghost",
@@ -3235,11 +5243,11 @@ function HorizontalArrayItemTemplate({
               onClick: onMoveUp,
               title: "Move up",
               className: "h-4 w-8 p-0",
-              children: /* @__PURE__ */ jsx31(ChevronUp2, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsx42(ChevronUp2, { className: "h-3 w-3" })
             }
           ),
-          /* @__PURE__ */ jsx31(
-            Button6,
+          /* @__PURE__ */ jsx42(
+            Button10,
             {
               type: "button",
               variant: "ghost",
@@ -3248,12 +5256,12 @@ function HorizontalArrayItemTemplate({
               onClick: onMoveDown,
               title: "Move down",
               className: "h-4 w-8 p-0",
-              children: /* @__PURE__ */ jsx31(ChevronDown4, { className: "h-3 w-3" })
+              children: /* @__PURE__ */ jsx42(ChevronDown4, { className: "h-3 w-3" })
             }
           )
         ] }),
-        canRemove && /* @__PURE__ */ jsx31(
-          Button6,
+        canRemove && /* @__PURE__ */ jsx42(
+          Button10,
           {
             type: "button",
             variant: "ghost",
@@ -3262,7 +5270,7 @@ function HorizontalArrayItemTemplate({
             onClick: onRemove,
             title: "Remove item",
             className: "text-muted-foreground hover:text-destructive h-8 w-8 p-0",
-            children: /* @__PURE__ */ jsx31(Trash22, { className: "h-3.5 w-3.5" })
+            children: /* @__PURE__ */ jsx42(Trash22, { className: "h-3.5 w-3.5" })
           }
         )
       ]
@@ -3271,49 +5279,49 @@ function HorizontalArrayItemTemplate({
 }
 
 // src/templates/TabsGroupTemplate.tsx
-import { useState as useState7 } from "react";
+import { useState as useState14 } from "react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@petrarca/sonnet-ui";
 
 // src/templates/GroupErrorBadge.tsx
 import { AlertCircle } from "lucide-react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx43 } from "react/jsx-runtime";
 function GroupErrorBadge({
   count
 }) {
   if (count === 0) return null;
   const label = count === 1 ? "1 field needs attention" : `${count} fields need attention`;
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx43(
     "span",
     {
       role: "img",
       "aria-label": label,
       title: label,
       className: "inline-flex shrink-0 text-destructive",
-      children: /* @__PURE__ */ jsx32(AlertCircle, { className: "h-3.5 w-3.5" })
+      children: /* @__PURE__ */ jsx43(AlertCircle, { className: "h-3.5 w-3.5" })
     }
   );
 }
 
 // src/templates/TabsGroupTemplate.tsx
-import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 function TabsGroupTemplate({
   groups
 }) {
-  const [active, setActive] = useState7(groups[0].key);
+  const [active, setActive] = useState14(groups[0].key);
   const value = groups.some((g) => g.key === active) ? active : groups[0].key;
-  return /* @__PURE__ */ jsxs20(Tabs, { value, onValueChange: setActive, children: [
-    /* @__PURE__ */ jsx33(TabsList, { className: "mb-4", children: groups.map((g) => /* @__PURE__ */ jsxs20(TabsTrigger, { value: g.key, className: "gap-1.5", children: [
+  return /* @__PURE__ */ jsxs28(Tabs, { value, onValueChange: setActive, children: [
+    /* @__PURE__ */ jsx44(TabsList, { className: "mb-4", children: groups.map((g) => /* @__PURE__ */ jsxs28(TabsTrigger, { value: g.key, className: "gap-1.5", children: [
       g.label,
-      /* @__PURE__ */ jsx33(GroupErrorBadge, { count: g.errorCount })
+      /* @__PURE__ */ jsx44(GroupErrorBadge, { count: g.errorCount })
     ] }, g.key)) }),
-    groups.map((g) => /* @__PURE__ */ jsx33(TabsContent, { value: g.key, className: "space-y-4", children: g.content }, g.key))
+    groups.map((g) => /* @__PURE__ */ jsx44(TabsContent, { value: g.key, className: "space-y-4", children: g.content }, g.key))
   ] });
 }
 
 // src/templates/StepperGroupTemplate.tsx
-import { useState as useState8 } from "react";
+import { useState as useState15 } from "react";
 import {
-  Button as Button7,
+  Button as Button11,
   Stepper,
   StepperList,
   StepperItem,
@@ -3325,47 +5333,47 @@ import {
   StepperPrev,
   StepperNext
 } from "@petrarca/sonnet-ui";
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 function StepperGroupTemplate({
   groups
 }) {
-  const [active, setActive] = useState8(groups[0].key);
+  const [active, setActive] = useState15(groups[0].key);
   const value = groups.some((g) => g.key === active) ? active : groups[0].key;
   const isLast = value === groups[groups.length - 1].key;
-  return /* @__PURE__ */ jsxs21(Stepper, { value, onValueChange: setActive, children: [
-    /* @__PURE__ */ jsx34(StepperList, { className: "mb-4 gap-2", children: groups.map((g) => /* @__PURE__ */ jsxs21(StepperItem, { value: g.key, children: [
-      /* @__PURE__ */ jsxs21(StepperTrigger, { children: [
-        /* @__PURE__ */ jsx34(StepperIndicator, {}),
-        /* @__PURE__ */ jsxs21(StepperTitle, { className: "inline-flex items-center gap-1.5", children: [
+  return /* @__PURE__ */ jsxs29(Stepper, { value, onValueChange: setActive, children: [
+    /* @__PURE__ */ jsx45(StepperList, { className: "mb-4 gap-2", children: groups.map((g) => /* @__PURE__ */ jsxs29(StepperItem, { value: g.key, children: [
+      /* @__PURE__ */ jsxs29(StepperTrigger, { children: [
+        /* @__PURE__ */ jsx45(StepperIndicator, {}),
+        /* @__PURE__ */ jsxs29(StepperTitle, { className: "inline-flex items-center gap-1.5", children: [
           g.label,
-          /* @__PURE__ */ jsx34(GroupErrorBadge, { count: g.errorCount })
+          /* @__PURE__ */ jsx45(GroupErrorBadge, { count: g.errorCount })
         ] })
       ] }),
-      /* @__PURE__ */ jsx34(StepperSeparator, {})
+      /* @__PURE__ */ jsx45(StepperSeparator, {})
     ] }, g.key)) }),
-    groups.map((g) => /* @__PURE__ */ jsx34(StepperContent, { value: g.key, className: "space-y-4", children: g.content }, g.key)),
-    /* @__PURE__ */ jsxs21("div", { className: "mt-4 flex justify-between", children: [
-      /* @__PURE__ */ jsx34(StepperPrev, { asChild: true, children: /* @__PURE__ */ jsx34(Button7, { variant: "outline", size: "sm", children: "Back" }) }),
-      !isLast && /* @__PURE__ */ jsx34(StepperNext, { asChild: true, children: /* @__PURE__ */ jsx34(Button7, { size: "sm", children: "Next" }) })
+    groups.map((g) => /* @__PURE__ */ jsx45(StepperContent, { value: g.key, className: "space-y-4", children: g.content }, g.key)),
+    /* @__PURE__ */ jsxs29("div", { className: "mt-4 flex justify-between", children: [
+      /* @__PURE__ */ jsx45(StepperPrev, { asChild: true, children: /* @__PURE__ */ jsx45(Button11, { variant: "outline", size: "sm", children: "Back" }) }),
+      !isLast && /* @__PURE__ */ jsx45(StepperNext, { asChild: true, children: /* @__PURE__ */ jsx45(Button11, { size: "sm", children: "Next" }) })
     ] })
   ] });
 }
 
 // src/templates/SectionsGroupTemplate.tsx
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
 function SectionsGroupTemplate({
   groups
 }) {
-  return /* @__PURE__ */ jsx35("div", { className: "space-y-6", children: groups.map((g) => /* @__PURE__ */ jsxs22(
+  return /* @__PURE__ */ jsx46("div", { className: "space-y-6", children: groups.map((g) => /* @__PURE__ */ jsxs30(
     "fieldset",
     {
       className: "rounded-md border border-border/60 px-3 pb-3 pt-1",
       children: [
-        /* @__PURE__ */ jsxs22("legend", { className: "inline-flex items-center gap-1.5 px-1 text-sm font-medium text-muted-foreground", children: [
+        /* @__PURE__ */ jsxs30("legend", { className: "inline-flex items-center gap-1.5 px-1 text-sm font-medium text-muted-foreground", children: [
           g.label,
-          /* @__PURE__ */ jsx35(GroupErrorBadge, { count: g.errorCount })
+          /* @__PURE__ */ jsx46(GroupErrorBadge, { count: g.errorCount })
         ] }),
-        /* @__PURE__ */ jsx35("div", { className: "space-y-4", children: g.content })
+        /* @__PURE__ */ jsx46("div", { className: "space-y-4", children: g.content })
       ]
     },
     g.key
@@ -3389,13 +5397,15 @@ function groupTemplateKey(variant) {
 }
 
 // src/FormFieldRenderer.tsx
+import { useMemo as useMemo9 } from "react";
 import { warnLog } from "@petrarca/sonnet-core";
 import {
   getFieldTitle,
   getFieldHelpText,
-  getFieldPlaceholder
+  getFieldPlaceholder,
+  liftNullableMember
 } from "@petrarca/sonnet-core/schema";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function mergeFieldOptions(globalOptions, property, uiSchema) {
   const xWidgetOptions = property["x-ui-options"] || {};
   const fieldOptions = uiSchema?.["x-ui-options"] || {};
@@ -3422,7 +5432,7 @@ function applyFieldWidth(widget, uiSchema, mergedOptions) {
   }
   const width = candidate && candidate in FIELD_WIDTH_CLASS ? candidate : "full";
   if (width === "full") return widget;
-  return /* @__PURE__ */ jsx36("div", { className: FIELD_WIDTH_CLASS[width], children: widget });
+  return /* @__PURE__ */ jsx47("div", { className: FIELD_WIDTH_CLASS[width], children: widget });
 }
 function resolvePresentationText(property, uiSchema) {
   return {
@@ -3438,7 +5448,7 @@ function resolveFieldFlags(fieldOptions, globalOptions, disabled, readOnly) {
 }
 function FormFieldRenderer({
   fieldName,
-  property,
+  property: declared,
   value,
   onChange,
   onBlur,
@@ -3453,6 +5463,7 @@ function FormFieldRenderer({
   idPrefix = "field",
   rawErrors
 }) {
+  const property = useMemo9(() => liftNullableMember(declared), [declared]);
   const label = getFieldTitle(fieldName, property);
   const { description, placeholder } = resolvePresentationText(
     property,
@@ -3473,7 +5484,7 @@ function FormFieldRenderer({
     uiSchema?.["x-ui-title"],
     globalOptions.label
   );
-  const widget = /* @__PURE__ */ jsx36(
+  const widget = /* @__PURE__ */ jsx47(
     Widget,
     {
       id: `${idPrefix}-${fieldName}`,
@@ -3500,15 +5511,17 @@ function FormFieldRenderer({
 }
 
 // src/hooks/useFormEngine.ts
-import { useState as useState10, useEffect as useEffect4, useMemo as useMemo8, useCallback as useCallback7, useRef as useRef6 } from "react";
+import { useState as useState17, useEffect as useEffect8, useMemo as useMemo11, useCallback as useCallback8, useRef as useRef8 } from "react";
 import { isEqual } from "@petrarca/sonnet-core";
 import {
+  isNullableBoolean as isNullableBoolean3,
   getSchemaProperties as getSchemaProperties4,
   getFieldDefault,
   applySchemaDefaults as applySchemaDefaults2,
   resolveSchema,
   resolveRefs,
   validateFormData,
+  stripFormItemIds,
   mergeFieldErrors,
   diffFormData,
   ensureFormItemIds
@@ -3601,7 +5614,7 @@ function runValidators(schema, data, registry, uiSchema, includeFormValidators)
 }
 
 // src/validators/useAsyncValidators.ts
-import { useEffect as useEffect3, useMemo as useMemo7, useRef as useRef5, useState as useState9 } from "react";
+import { useEffect as useEffect7, useMemo as useMemo10, useRef as useRef7, useState as useState16 } from "react";
 import { getSchemaProperties as getSchemaProperties3 } from "@petrarca/sonnet-core/schema";
 function keyOf(value) {
   try {
@@ -3657,12 +5670,12 @@ function collectCandidates(schema, data, registry, uiSchema, isRoot) {
   return out;
 }
 function useAsyncValidators(schema, data, registry, uiSchema, isRoot) {
-  const [entries, setEntries] = useState9({});
-  const handledKey = useRef5({});
+  const [entries, setEntries] = useState16({});
+  const handledKey = useRef7({});
   const candidates = registry && (registry.asyncField || registry.asyncForm) ? collectCandidates(schema, data, registry, uiSchema, isRoot) : [];
   const liveIds = new Set(candidates.map((c) => c.id));
   const signature = candidates.map((c) => `${c.id}=${c.key}`).join(";");
-  useEffect3(() => {
+  useEffect7(() => {
     for (const c of candidates) {
       if (handledKey.current[c.id] === c.key) continue;
       handledKey.current[c.id] = c.key;
@@ -3681,7 +5694,7 @@ function useAsyncValidators(schema, data, registry, uiSchema, isRoot) {
     }
   }, [signature]);
   const liveKey = [...liveIds].sort().join(",");
-  useEffect3(() => {
+  useEffect7(() => {
     setEntries((e) => {
       const kept = Object.entries(e).filter(([id]) => liveIds.has(id));
       return kept.length === Object.keys(e).length ? e : Object.fromEntries(kept);
@@ -3701,7 +5714,7 @@ function useAsyncValidators(schema, data, registry, uiSchema, isRoot) {
     errorList.push(...entry.errors);
   }
   const errorSig = errorList.map((e) => `${e.pointer}\0${e.message}`).join("|");
-  const asyncErrors = useMemo7(() => errorList, [errorSig]);
+  const asyncErrors = useMemo10(() => errorList, [errorSig]);
   return { asyncErrors, isValidating };
 }
 
@@ -3721,9 +5734,14 @@ function orderProperties(properties, orderArray) {
 }
 
 // src/hooks/useFormEngine.ts
+var COMMITTED_FORMATS = /* @__PURE__ */ new Set(["date", "time", "date-time"]);
+function isCommittedFormat(property) {
+  return property.format !== void 0 && COMMITTED_FORMATS.has(property.format);
+}
 function isImmediateField(fieldName, properties) {
   const property = properties[fieldName];
-  return property?.type === "boolean" || property?.enum !== void 0;
+  if (!property) return false;
+  return property.type === "boolean" || isNullableBoolean3(property) || isCommittedFormat(property) || property.enum !== void 0 || property.items?.enum !== void 0 || property["x-ui-options"]?.immediate === true;
 }
 function computeBaselineUpdate(newData, originalData, initialized, schemaPropertyNames) {
   const newCount = Object.keys(newData).length;
@@ -3750,7 +5768,7 @@ function computeBaselineUpdate(newData, originalData, initialized, schemaPropert
 }
 function computeAllErrors(args) {
   const { schema, data, customSync, asyncErrors, extraErrors } = args;
-  const base = validateFormData(schema, data).fieldErrors;
+  const base = validateFormData(schema, stripFormItemIds(data)).fieldErrors;
   return mergeFieldErrors(base, customSync, asyncErrors, extraErrors ?? []);
 }
 function useFormEngine({
@@ -3772,21 +5790,21 @@ function useFormEngine({
   validators,
   isRoot = true
 }) {
-  const refResolvedSchema = useMemo8(
+  const refResolvedSchema = useMemo11(
     () => resolveRefs(schema, refResolver),
     [schema, refResolver]
   );
-  const seed = useState10(
+  const seed = useState17(
     () => ensureFormItemIds(
       applySchemaDefaults2(data, refResolvedSchema),
       refResolvedSchema
     )
   )[0];
-  const [originalData, setOriginalData] = useState10(
+  const [originalData, setOriginalData] = useState17(
     () => seed
   );
-  const [originalDataInitialized, setOriginalDataInitialized] = useState10(false);
-  const [nonSchemaData, setNonSchemaData] = useState10(
+  const [originalDataInitialized, setOriginalDataInitialized] = useState17(false);
+  const [nonSchemaData, setNonSchemaData] = useState17(
     () => {
       const props = getSchemaProperties4(refResolvedSchema);
       const names = Object.keys(props);
@@ -3795,26 +5813,26 @@ function useFormEngine({
       );
     }
   );
-  const [formData, setFormData] = useState10(() => seed);
-  const formDataRef = useRef6(formData);
+  const [formData, setFormData] = useState17(() => seed);
+  const formDataRef = useRef8(formData);
   formDataRef.current = formData;
-  const [pendingChanges, setPendingChanges] = useState10({});
-  const resolvedSchema = useMemo8(
+  const [pendingChanges, setPendingChanges] = useState17({});
+  const resolvedSchema = useMemo11(
     () => resolveSchema(refResolvedSchema, formData),
     [refResolvedSchema, formData]
   );
-  const orderedProperties = useMemo8(() => {
+  const orderedProperties = useMemo11(() => {
     const properties2 = getSchemaProperties4(resolvedSchema);
     const rawOrder = uiSchema["x-ui-order"] ?? resolvedSchema["x-ui-order"];
     const orderArray = Array.isArray(rawOrder) ? rawOrder : void 0;
     return orderProperties(properties2, orderArray);
   }, [resolvedSchema, uiSchema]);
-  const [initialDefaultsSent, setInitialDefaultsSent] = useState10(false);
-  const [edited, setEdited] = useState10({});
-  const [touched, setTouched] = useState10({});
-  const [submitAttempted, setSubmitAttempted] = useState10(false);
+  const [initialDefaultsSent, setInitialDefaultsSent] = useState17(false);
+  const edited = useRef8(/* @__PURE__ */ new Set());
+  const [touched, setTouched] = useState17({});
+  const [submitAttempted, setSubmitAttempted] = useState17(false);
   const properties = getSchemaProperties4(resolvedSchema);
-  useEffect4(() => {
+  useEffect8(() => {
     if (!initialDefaultsSent) {
       const hasDefaults = Object.entries(properties).some(
         ([fieldName, property]) => data[fieldName] === void 0 && getFieldDefault(property) !== void 0
@@ -3825,7 +5843,7 @@ function useFormEngine({
       setInitialDefaultsSent(true);
     }
   }, [initialDefaultsSent, properties, data, formData, onChange]);
-  useEffect4(() => {
+  useEffect8(() => {
     const currentPropertyNames = Object.keys(properties);
     const keysToRemove = Object.keys(formData).filter(
       (k) => !currentPropertyNames.includes(k)
@@ -3839,8 +5857,23 @@ function useFormEngine({
       if (onChange) onChange(cleanedData);
     }
   }, [properties, formData, onChange]);
-  const prevDataRef = useRef6(data);
-  useEffect4(() => {
+  const shownFields = useRef8(
+    new Set(Object.keys(getSchemaProperties4(refResolvedSchema)))
+  );
+  useEffect8(() => {
+    const names = Object.keys(properties);
+    const appeared = names.filter((n) => !shownFields.current.has(n));
+    shownFields.current = new Set(names);
+    if (appeared.length === 0) return;
+    const filled = applySchemaDefaults2(formData, {
+      properties: Object.fromEntries(appeared.map((n) => [n, properties[n]]))
+    });
+    if (isEqual(filled, formData)) return;
+    setFormData(filled);
+    if (onChange) onChange(filled);
+  }, [properties, formData, onChange]);
+  const prevDataRef = useRef8(data);
+  useEffect8(() => {
     if (isEqual(prevDataRef.current, data)) return;
     prevDataRef.current = data;
     const newData = ensureFormItemIds(
@@ -3870,17 +5903,17 @@ function useFormEngine({
     originalData,
     originalDataInitialized
   ]);
-  const hasChanges = useMemo8(
+  const hasChanges = useMemo11(
     () => !isEqual(formData, originalData),
     [formData, originalData]
   );
-  const displayData = useMemo8(() => {
+  const displayData = useMemo11(() => {
     if (deferStateUpdates && Object.keys(pendingChanges).length > 0) {
       return { ...formData, ...pendingChanges };
     }
     return formData;
   }, [formData, pendingChanges, deferStateUpdates]);
-  const customSync = useMemo8(
+  const customSync = useMemo11(
     () => runValidators(resolvedSchema, displayData, validators, uiSchema, isRoot),
     [resolvedSchema, displayData, validators, uiSchema, isRoot]
   );
@@ -3891,7 +5924,7 @@ function useFormEngine({
     uiSchema,
     isRoot
   );
-  const validation = useMemo8(() => {
+  const validation = useMemo11(() => {
     const merged = computeAllErrors({
       schema: resolvedSchema,
       data: displayData,
@@ -3906,17 +5939,15 @@ function useFormEngine({
     };
   }, [resolvedSchema, displayData, customSync, asyncErrors, extraErrors]);
   const { isValid, fieldErrors } = validation;
-  const onValidationChangeRef = useRef6(onValidationChange);
+  const onValidationChangeRef = useRef8(onValidationChange);
   onValidationChangeRef.current = onValidationChange;
-  useEffect4(() => {
+  useEffect8(() => {
     onValidationChangeRef.current?.(validation.errors, validation.isValid);
   }, [validation]);
-  const handleFieldChange = useCallback7(
+  const handleFieldChange = useCallback8(
     (fieldName, value) => {
       if (readOnly) return;
-      setEdited(
-        (prev) => prev[fieldName] ? prev : { ...prev, [fieldName]: true }
-      );
+      edited.current.add(fieldName);
       const immediate = isImmediateField(fieldName, properties);
       if (deferStateUpdates && !immediate) {
         setPendingChanges((prev) => ({ ...prev, [fieldName]: value }));
@@ -3939,7 +5970,7 @@ function useFormEngine({
       properties
     ]
   );
-  const flushPendingField = useCallback7(
+  const flushPendingField = useCallback8(
     (fieldName) => {
       if (!deferStateUpdates) return;
       if (pendingChanges[fieldName] === void 0) return;
@@ -3954,10 +5985,10 @@ function useFormEngine({
     },
     [showActions, deferStateUpdates, pendingChanges, formData, onChange]
   );
-  const handleFieldBlur = useCallback7(
+  const handleFieldBlur = useCallback8(
     (fieldName) => {
       if (readOnly) return;
-      if (edited[fieldName]) {
+      if (edited.current.has(fieldName)) {
         setTouched(
           (prev) => prev[fieldName] ? prev : { ...prev, [fieldName]: true }
         );
@@ -3975,7 +6006,6 @@ function useFormEngine({
     },
     [
       readOnly,
-      edited,
       pendingChanges,
       deferChanges,
       deferStateUpdates,
@@ -3985,7 +6015,7 @@ function useFormEngine({
       flushPendingField
     ]
   );
-  const handleSave = useCallback7(() => {
+  const handleSave = useCallback8(() => {
     setSubmitAttempted(true);
     if (!hasChanges && !allowPristineSave) return;
     if (isValidating) return;
@@ -4032,10 +6062,10 @@ function useFormEngine({
     validators,
     isRoot
   ]);
-  const handleCancel = useCallback7(() => {
+  const handleCancel = useCallback8(() => {
     setFormData({ ...originalData });
     setPendingChanges({});
-    setEdited({});
+    edited.current = /* @__PURE__ */ new Set();
     setTouched({});
     setSubmitAttempted(false);
     onCancel?.();
@@ -4063,30 +6093,7 @@ import {
   useValidationDisplay,
   useSaveWhenInvalid
 } from "@petrarca/sonnet-core/config";
-import { jsx as jsx37, jsxs as jsxs23 } 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;
-}
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 function resolveFlagDefaults(props) {
   return {
     disabled: props.disabled ?? false,
@@ -4108,18 +6115,20 @@ function resolveValueDefaults(props) {
     uiSchema: props.uiSchema ?? {}
   };
 }
-function useWrappedCallbacks(onChange, onBlur, onUpdate) {
-  const wrappedOnChange = useCallback8(
-    (d) => onChange?.(stripFids(d)),
-    [onChange]
+var keepFids = (data) => data;
+function useWrappedCallbacks(onChange, onBlur, onUpdate, isRootForm) {
+  const strip = isRootForm ? stripFormItemIds2 : keepFids;
+  const wrappedOnChange = useCallback9(
+    (d) => onChange?.(strip(d)),
+    [onChange, strip]
   );
-  const wrappedOnBlur = useCallback8(
-    (fieldName, d) => onBlur?.(fieldName, stripFids(d)),
-    [onBlur]
+  const wrappedOnBlur = useCallback9(
+    (fieldName, d) => onBlur?.(fieldName, strip(d)),
+    [onBlur, strip]
   );
-  const wrappedOnUpdate = useCallback8(
-    (d, changed, diff) => onUpdate?.(stripFids(d), stripFids(changed), diff),
-    [onUpdate]
+  const wrappedOnUpdate = useCallback9(
+    (d, changed, diff) => onUpdate?.(strip(d), strip(changed), diff),
+    [onUpdate, strip]
   );
   return {
     wrappedOnChange: onChange ? wrappedOnChange : void 0,
@@ -4130,7 +6139,7 @@ function useWrappedCallbacks(onChange, onBlur, onUpdate) {
 function buildFieldMap(fields) {
   const map = /* @__PURE__ */ new Map();
   for (const field of fields) {
-    if (React13.isValidElement(field) && field.key != null) {
+    if (React18.isValidElement(field) && field.key != null) {
       map.set(String(field.key), field);
     }
   }
@@ -4149,12 +6158,12 @@ function resolveGridColumns(row, fieldCount) {
 }
 function wrapInGroup(group, key, content) {
   if (!group) return content;
-  return /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsxs31(
     "fieldset",
     {
       className: "rounded-md border border-border/60 px-3 pb-3 pt-1",
       children: [
-        /* @__PURE__ */ jsx37("legend", { className: "px-1 text-sm font-medium text-muted-foreground", children: group }),
+        /* @__PURE__ */ jsx48("legend", { className: "px-1 text-sm font-medium text-muted-foreground", children: group }),
         content
       ]
     },
@@ -4176,7 +6185,7 @@ function buildRowElement(row, fieldMap, defaultRowGap) {
     gridTemplateColumns: resolveGridColumns(row, rowFields.length),
     gap: `${rowGap}px`
   };
-  const inner = /* @__PURE__ */ jsx37("div", { style, children: rowFields }, `row:${rowKey}`);
+  const inner = /* @__PURE__ */ jsx48("div", { style, children: rowFields }, `row:${rowKey}`);
   return {
     element: wrapInGroup(row.group, rowKey, inner),
     placed: row.fields
@@ -4185,7 +6194,7 @@ function buildRowElement(row, fieldMap, defaultRowGap) {
 function collectUnplacedFields(fields, placed) {
   const result = [];
   for (const field of fields) {
-    if (React13.isValidElement(field) && field.key != null && !placed.has(String(field.key))) {
+    if (React18.isValidElement(field) && field.key != null && !placed.has(String(field.key))) {
       result.push(field);
     }
   }
@@ -4278,8 +6287,8 @@ function HiddenErrorNotice({
   count
 }) {
   if (count === 0) return null;
-  return /* @__PURE__ */ jsxs23("p", { className: "flex items-center gap-1.5 text-sm text-destructive", children: [
-    /* @__PURE__ */ jsx37(AlertCircle2, { className: "h-4 w-4 shrink-0" }),
+  return /* @__PURE__ */ jsxs31("p", { className: "flex items-center gap-1.5 text-sm text-destructive", children: [
+    /* @__PURE__ */ jsx48(AlertCircle2, { className: "h-4 w-4 shrink-0" }),
     count === 1 ? "1 required field is in a section that is not currently shown." : `${count} required fields are in sections that are not currently shown.`
   ] });
 }
@@ -4287,13 +6296,13 @@ function FormLevelErrors({
   messages
 }) {
   if (messages.length === 0) return null;
-  return /* @__PURE__ */ jsx37("div", { className: "space-y-1", children: messages.map((msg, i) => /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx48("div", { className: "space-y-1", children: messages.map((msg, i) => /* @__PURE__ */ jsxs31(
     "p",
     {
       role: "alert",
       className: "flex items-center gap-1.5 text-sm text-destructive",
       children: [
-        /* @__PURE__ */ jsx37(AlertCircle2, { className: "h-4 w-4 shrink-0" }),
+        /* @__PURE__ */ jsx48(AlertCircle2, { className: "h-4 w-4 shrink-0" }),
         msg
       ]
     },
@@ -4318,7 +6327,7 @@ function layoutFieldsInGroups(fields, groupDefs, defaultRowGap, fieldErrors, for
     content: b.rows,
     errorCount: groupErrorCount(groupDefs[b.index], fieldErrors)
   }));
-  return [/* @__PURE__ */ jsx37(GroupTemplate, { groups }, "form:groups"), ...unplaced];
+  return [/* @__PURE__ */ jsx48(GroupTemplate, { groups }, "form:groups"), ...unplaced];
 }
 function FormContainer({
   displayContents,
@@ -4342,14 +6351,14 @@ function FormContainer({
   children
 }) {
   if (displayContents) {
-    return /* @__PURE__ */ jsx37("div", { style: { display: "contents" }, children });
+    return /* @__PURE__ */ jsx48("div", { style: { display: "contents" }, children });
   }
-  return /* @__PURE__ */ jsxs23(SimpleStack, { gap: "md", children: [
+  return /* @__PURE__ */ jsxs31(SimpleStack, { gap: "md", children: [
     children,
-    showExtraProperties && /* @__PURE__ */ jsx37(ExtraPropertiesCard_default, { properties: formData, schema: resolvedSchema }),
-    /* @__PURE__ */ jsx37(HiddenErrorNotice, { count: hiddenErrorCount }),
-    /* @__PURE__ */ jsx37(FormLevelErrors, { messages: formLevelErrors }),
-    showActions && /* @__PURE__ */ jsx37(
+    showExtraProperties && /* @__PURE__ */ jsx48(ExtraPropertiesCard_default, { properties: formData, schema: resolvedSchema }),
+    /* @__PURE__ */ jsx48(HiddenErrorNotice, { count: hiddenErrorCount }),
+    /* @__PURE__ */ jsx48(FormLevelErrors, { messages: formLevelErrors }),
+    showActions && /* @__PURE__ */ jsx48(
       FormActions,
       {
         onSave: handleSave,
@@ -4395,7 +6404,7 @@ function JsonSchemaFormRenderer(props) {
     allowPristineSave
   } = resolveFlagDefaults(props);
   const { saveLabel, cancelLabel, widgets, uiSchema } = resolveValueDefaults(props);
-  const { wrappedOnChange, wrappedOnBlur, wrappedOnUpdate } = useWrappedCallbacks(onChange, onBlur, onUpdate);
+  const { wrappedOnChange, wrappedOnBlur, wrappedOnUpdate } = useWrappedCallbacks(onChange, onBlur, onUpdate, isRootForm);
   const {
     formData,
     displayData,
@@ -4431,19 +6440,19 @@ function JsonSchemaFormRenderer(props) {
     isRoot: isRootForm
   });
   const layoutLabelPlacement = uiSchema["x-ui-layout"]?.labelPlacement;
-  const globalOptions = useMemo9(
+  const globalOptions = useMemo12(
     () => ({
       ...layoutLabelPlacement ? { labelPlacement: layoutLabelPlacement } : {},
       ...uiSchema["x-ui-globalOptions"] || {}
     }),
     [layoutLabelPlacement, uiSchema]
   );
-  const resolvedTemplates = useMemo9(
+  const resolvedTemplates = useMemo12(
     () => ({ ...DEFAULT_TEMPLATES, ...templates }),
     [templates]
   );
-  const nestedRenderer = useCallback8(
-    (props2) => /* @__PURE__ */ jsx37(
+  const nestedRenderer = useCallback9(
+    (props2) => /* @__PURE__ */ jsx48(
       JsonSchemaFormRenderer,
       {
         ...props2,
@@ -4460,7 +6469,7 @@ function JsonSchemaFormRenderer(props) {
     nestedFormContext,
     submitAttempted
   );
-  const contextValue = useMemo9(
+  const contextValue = useMemo12(
     () => ({
       renderer: nestedRenderer,
       templates: resolvedTemplates,
@@ -4477,7 +6486,7 @@ function JsonSchemaFormRenderer(props) {
     hasOnBlur: !!onBlur,
     validationDisplay
   });
-  const showFieldErrors = useCallback8(
+  const showFieldErrors = useCallback9(
     (fieldName) => fieldErrorsVisible(
       validationDisplay,
       effectiveSubmitAttempted,
@@ -4485,13 +6494,13 @@ function JsonSchemaFormRenderer(props) {
     ),
     [validationDisplay, effectiveSubmitAttempted, touched]
   );
-  const fields = useMemo9(
+  const fields = useMemo12(
     () => orderedProperties.flatMap(([fieldName, property]) => {
       const rule = uiSchema[fieldName]?.["x-ui-rule"] ?? property["x-ui-rule"];
       const { visible, enabled } = evaluateUiRule(rule, rootData);
       if (!visible) return [];
       return [
-        /* @__PURE__ */ jsx37(
+        /* @__PURE__ */ jsx48(
           FormFieldRenderer,
           {
             fieldName,
@@ -4547,7 +6556,7 @@ function JsonSchemaFormRenderer(props) {
     resolvedTemplates,
     layoutConfig?.variant
   );
-  const layoutFields = useMemo9(() => {
+  const layoutFields = useMemo12(() => {
     if (groupDefs && groupDefs.length > 0) {
       return layoutFieldsInGroups(
         fields,
@@ -4572,17 +6581,17 @@ function JsonSchemaFormRenderer(props) {
     rootData,
     groupTemplate
   ]);
-  const hiddenErrorCount = useMemo9(() => {
+  const hiddenErrorCount = useMemo12(() => {
     if (!groupDefs?.length || fieldErrors.length === 0) return 0;
     const hidden = hiddenGroupFieldNames(groupDefs, rootData);
     if (hidden.size === 0) return 0;
     return fieldErrors.filter((e) => hidden.has(pointerRoot(e.pointer))).length;
   }, [groupDefs, fieldErrors, rootData]);
-  const formLevelErrors = useMemo9(() => {
+  const formLevelErrors = useMemo12(() => {
     if (validationDisplay !== "always" && !submitAttempted) return [];
     return fieldErrors.filter((e) => e.pointer === "").map((e) => e.message);
   }, [fieldErrors, validationDisplay, submitAttempted]);
-  return /* @__PURE__ */ jsx37(NestedFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx48(NestedFormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx48(
     FormContainer,
     {
       displayContents,
@@ -4609,7 +6618,7 @@ function JsonSchemaFormRenderer(props) {
 }
 
 // src/hooks/useResolvedSchema.ts
-import { useMemo as useMemo10 } from "react";
+import { useMemo as useMemo13 } from "react";
 import {
   getSchemaProperties as getSchemaProperties5,
   resolveSchema as resolveSchema2
@@ -4619,11 +6628,11 @@ function useResolvedSchema({
   formData,
   uiSchema
 }) {
-  const resolvedSchema = useMemo10(
+  const resolvedSchema = useMemo13(
     () => resolveSchema2(schema, formData),
     [schema, formData]
   );
-  const orderedProperties = useMemo10(() => {
+  const orderedProperties = useMemo13(() => {
     const properties = getSchemaProperties5(resolvedSchema);
     const rawOrder = uiSchema["x-ui-order"] ?? resolvedSchema["x-ui-order"];
     const orderArray = Array.isArray(rawOrder) ? rawOrder : void 0;
@@ -4632,8 +6641,13 @@ function useResolvedSchema({
   return { resolvedSchema, orderedProperties };
 }
 export {
+  AbsentReasonsWidget,
   ArrayWidget,
+  CheckboxGroupWidget,
   CheckboxWidget,
+  ChoiceWithTextWidget,
+  CodeableConceptWidget,
+  CodedValueWidget,
   DEFAULT_TEMPLATES,
   DEFAULT_WIDGETS,
   DEFAULT_WIDGET_MAP,
@@ -4647,6 +6661,7 @@ export {
   FormFieldRenderer,
   FormFieldWrapper,
   FormInput,
+  FormKeyValueInput,
   FormMultiSelect,
   FormNumberInput,
   FormQuantityInput,
@@ -4656,10 +6671,12 @@ export {
   GroupErrorBadge,
   JsonEditorWidget,
   JsonSchemaFormRenderer,
+  KeyValueWidget,
   NumberWidget,
   ObjectWidget,
   OneOfWidget,
   QuantityWidget,
+  RadioWidget,
   SectionsGroupTemplate,
   SelectWidget,
   StepperGroupTemplate,