@ukiahinsure/a2ui-react-adapter 0.1.17 → 0.1.19

package/dist/index.d.ts

@@ -1,9 +1,23 @@
-import { A as A2UIClientAdapter, a as A2UISurfaceMetadata, b as A2UISessionController, c as A2UIRoomLike } from './session-BcHSjUlD.js';
-export { d as A2UIActionDeliveryStatus, e as A2UIActionResult, f as A2UIActionState, g as A2UICapabilityEnvelope, h as A2UIClientActionEnvelope, i as A2UIClientAdapterOptions, j as A2UIClientErrorEnvelope, k as A2UIClientErrorEvent, l as A2UIEditingSnapshot, m as A2UIFieldControl, n as A2UIFieldDescriptor, o as A2UIFieldInteractionField, p as A2UIFieldInteractionGroup, q as A2UIFieldValue, r as A2UIPendingAction, s as A2UIRendererActionEvent, t as A2UIServerEnvelope, u as A2UISessionControllerOptions, v as A2UISessionSnapshot, w as A2UISessionStatus, x as A2UIStreamParticipant, y as A2UISurfaceStructure, z as A2UITabDescriptor, B as A2UITrustedServerParticipant, C as A2UI_CAPABILITIES_TOPIC, D as A2UI_CLIENT_TOPIC, E as A2UI_PROTOCOL_VERSION, F as A2UI_SERVER_TOPIC, G as AckEnvelope, H as AckFieldError, I as AdapterSurface, J as CLIENT_ACTIONS, K as CLIENT_ERROR_CODES, L as ClientAction, M as ClientErrorCode, N as ENVELOPE_VERSION, O as MAX_ENVELOPE_BYTES, P as ParticipantRole, S as SectionNavigation, Q as SnapshotEnvelope, R as SurfaceUpdateEnvelope } from './session-BcHSjUlD.js';
+import { A as A2UIClientAdapter, a as A2UISurfaceMetadata, b as A2UISessionController, c as A2UIRoomLike } from './session-BnvcVx-k.js';
+export { d as A2UIActionDeliveryStatus, e as A2UIActionResult, f as A2UIActionState, g as A2UICapabilityEnvelope, h as A2UIClientActionEnvelope, i as A2UIClientAdapterOptions, j as A2UIClientErrorEnvelope, k as A2UIClientErrorEvent, l as A2UIEditingSnapshot, m as A2UIFieldControl, n as A2UIFieldDescriptor, o as A2UIFieldInteractionField, p as A2UIFieldInteractionGroup, q as A2UIFieldUpdateEvent, r as A2UIFieldValue, s as A2UIPendingAction, t as A2UIRendererActionEvent, u as A2UIServerEnvelope, v as A2UISessionControllerOptions, w as A2UISessionSnapshot, x as A2UISessionStatus, y as A2UIStreamParticipant, z as A2UISurfaceStructure, B as A2UITabDescriptor, C as A2UITrustedServerParticipant, D as A2UI_CAPABILITIES_TOPIC, E as A2UI_CLIENT_TOPIC, F as A2UI_PROTOCOL_VERSION, G as A2UI_SERVER_TOPIC, H as AckEnvelope, I as AckFieldError, J as AdapterSurface, K as CLIENT_ACTIONS, L as CLIENT_ERROR_CODES, M as ClientAction, N as ClientErrorCode, O as ENVELOPE_VERSION, P as MAX_ENVELOPE_BYTES, Q as ParticipantRole, S as SectionNavigation, R as SnapshotEnvelope, T as SurfaceUpdateEnvelope } from './session-BnvcVx-k.js';
 import { ReactNode } from 'react';
 
 /** Accessible host around the official A2UI v0.9.1 React surface. */
 
+/**
+ * The agent changed what the form shows: it filled or corrected field values
+ * (`field-value`), or moved the conversation to a new current field group
+ * (`current-group`). `element` is the rendered container for the first
+ * affected field (the whole choice group or date editor, not one option), so
+ * hosts can scroll to it for any control type.
+ */
+interface A2UIAgentUpdateEvent {
+    reason: "field-value" | "current-group";
+    surfaceId: string;
+    fields: readonly string[];
+    groupId?: string;
+    element?: HTMLElement;
+}
 interface A2UISurfaceHostProps {
     adapter: A2UIClientAdapter;
     /** Render a specific surface; defaults to the adapter's current surface. */
@@ -25,8 +39,10 @@ interface A2UISurfaceHostProps {
     noSurfaceFallback?: ReactNode;
     /** Shown when the surface fails to render. */
     errorFallback?: ReactNode;
+    /** Called after the DOM reflects an agent-driven field or group change. */
+    onAgentUpdate?: (event: A2UIAgentUpdateEvent) => void;
 }
-declare function A2UISurfaceHost({ adapter, surfaceId, surfaceMetadata, sessionController, hostId, ariaLabel, disabled, busy, invalidFields, validationSummaryId, noSurfaceFallback, errorFallback, }: A2UISurfaceHostProps): ReactNode;
+declare function A2UISurfaceHost({ adapter, surfaceId, surfaceMetadata, sessionController, hostId, ariaLabel, disabled, busy, invalidFields, validationSummaryId, noSurfaceFallback, errorFallback, onAgentUpdate, }: A2UISurfaceHostProps): ReactNode;
 
 /** Explicit room-ownership helper backed by backend-issued runtime material. */
 
@@ -48,4 +64,4 @@ interface A2UIJoinedRoom {
  */
 declare function joinA2UIRoom(tokenProvider: A2UITokenProvider): Promise<A2UIJoinedRoom>;
 
-export { A2UIClientAdapter, type A2UIJoinedRoom, A2UIRoomLike, type A2UIRuntimeMaterial, A2UISessionController, A2UISurfaceHost, type A2UISurfaceHostProps, A2UISurfaceMetadata, type A2UITokenProvider, joinA2UIRoom };
+export { type A2UIAgentUpdateEvent, A2UIClientAdapter, type A2UIJoinedRoom, A2UIRoomLike, type A2UIRuntimeMaterial, A2UISessionController, A2UISurfaceHost, type A2UISurfaceHostProps, A2UISurfaceMetadata, type A2UITokenProvider, joinA2UIRoom };

package/dist/index.js

@@ -10,7 +10,7 @@ import {
 } from "./chunk-AOBRTDAU.js";
 
 // src/adapter.ts
-import { basicCatalog } from "@a2ui/react/v0_9";
+import { basicCatalog as basicCatalog2 } from "@a2ui/react/v0_9";
 import {
   A2uiError,
   Catalog,
@@ -18,11 +18,44 @@ import {
   MessageProcessor
 } from "@a2ui/web_core/v0_9";
 
+// src/HospitalChoice.tsx
+import { useId } from "react";
+import { basicCatalog, createComponentImplementation } from "@a2ui/react/v0_9";
+import { ChoicePickerApi } from "@a2ui/web_core/v0_9/basic_catalog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var OriginalChoice = basicCatalog.components.get("ChoicePicker").render;
+var HospitalChoice = createComponentImplementation(ChoicePickerApi, ({ props, context, buildChild }) => {
+  const id = useId();
+  if (props.label !== "hospital_preference") {
+    return /* @__PURE__ */ jsx(OriginalChoice, { context, buildChild });
+  }
+  const selected = Array.isArray(props.value) ? props.value[0] ?? "" : "";
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "0.25rem" }, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: id, children: "Hospital preference" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        "data-a2ui-field": "hospital_preference",
+        value: selected,
+        required: true,
+        style: { padding: "0.5rem", border: "var(--a2ui-border)", borderRadius: "var(--a2ui-border-radius)" },
+        onChange: (event) => props.setValue(event.currentTarget.value ? [event.currentTarget.value] : []),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: "Choose Prefer or Avoid" }),
+          /* @__PURE__ */ jsx("option", { value: "Prefer", children: "Prefer" }),
+          /* @__PURE__ */ jsx("option", { value: "Avoid", children: "Avoid" })
+        ]
+      }
+    )
+  ] });
+});
+
 // src/DateTimeInput.tsx
-import { useId, useLayoutEffect, useRef, useState } from "react";
-import { createComponentImplementation } from "@a2ui/react/v0_9";
+import { useId as useId2, useLayoutEffect, useRef, useState } from "react";
+import { createComponentImplementation as createComponentImplementation2 } from "@a2ui/react/v0_9";
 import { DateTimeInputApi } from "@a2ui/web_core/v0_9/basic_catalog";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var inputStyle = {
   backgroundColor: "var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff))",
   color: "var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333))",
@@ -50,7 +83,7 @@ function displayDate(value) {
   return iso ? `${iso.slice(5, 7)}/${iso.slice(8, 10)}/${iso.slice(0, 4)}` : value;
 }
 function DateOnlyInput(props) {
-  const id = useId();
+  const id = useId2();
   const [draft, setDraft] = useState(() => displayDate(props.value || ""));
   const [pickerOpen, setPickerOpen] = useState(false);
   const published = useRef(props.value || "");
@@ -76,10 +109,10 @@ function DateOnlyInput(props) {
     published.current = value;
     props.setValue(value);
   };
-  return /* @__PURE__ */ jsxs("div", { "data-a2ui-date-editor": "true", style: { display: "flex", flexDirection: "column", gap: "var(--a2ui-spacing-xs, 0.25rem)" }, children: [
-    props.label && /* @__PURE__ */ jsx("label", { htmlFor: id, style: labelStyle, children: props.label }),
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "0.25rem", position: "relative" }, children: [
-      /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { "data-a2ui-date-editor": "true", style: { display: "flex", flexDirection: "column", gap: "var(--a2ui-spacing-xs, 0.25rem)" }, children: [
+    props.label && /* @__PURE__ */ jsx2("label", { htmlFor: id, style: labelStyle, children: props.label }),
+    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: "0.25rem", position: "relative" }, children: [
+      /* @__PURE__ */ jsx2(
         "input",
         {
           ref: inputRef,
@@ -97,7 +130,7 @@ function DateOnlyInput(props) {
           style: { ...inputStyle, minWidth: 0, flex: 1 }
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
@@ -117,7 +150,7 @@ function DateOnlyInput(props) {
           children: "\u25A6"
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx2(
         "input",
         {
           ref: pickerRef,
@@ -140,15 +173,15 @@ function DateOnlyInput(props) {
   ] });
 }
 function NativeTimeInput(props) {
-  const id = useId();
+  const id = useId2();
   const inputRef = useRef(null);
   const initialValue = useRef(props.value || "");
   useLayoutEffect(() => {
     if (inputRef.current && inputRef.current.value !== (props.value || "")) inputRef.current.value = props.value || "";
   }, [props.value]);
-  return /* @__PURE__ */ jsxs("div", { children: [
-    props.label && /* @__PURE__ */ jsx("label", { htmlFor: id, style: labelStyle, children: props.label }),
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("div", { children: [
+    props.label && /* @__PURE__ */ jsx2("label", { htmlFor: id, style: labelStyle, children: props.label }),
+    /* @__PURE__ */ jsx2(
       "input",
       {
         ref: inputRef,
@@ -163,19 +196,19 @@ function NativeTimeInput(props) {
     )
   ] });
 }
-var DateTimeInput = createComponentImplementation(
+var DateTimeInput = createComponentImplementation2(
   DateTimeInputApi,
-  ({ props }) => props.enableDate && !props.enableTime ? /* @__PURE__ */ jsx(DateOnlyInput, { ...props }) : /* @__PURE__ */ jsx(NativeTimeInput, { ...props })
+  ({ props }) => props.enableDate && !props.enableTime ? /* @__PURE__ */ jsx2(DateOnlyInput, { ...props }) : /* @__PURE__ */ jsx2(NativeTimeInput, { ...props })
 );
 
 // src/adapter.ts
 var editableDateCatalog = new Catalog(
-  basicCatalog.id,
-  [...basicCatalog.components.values()].map(
-    (component) => component.name === DateTimeInput.name ? DateTimeInput : component
+  basicCatalog2.id,
+  [...basicCatalog2.components.values()].map(
+    (component) => component.name === DateTimeInput.name ? DateTimeInput : component.name === HospitalChoice.name ? HospitalChoice : component
   ),
-  [...basicCatalog.functions.values()],
-  basicCatalog.themeSchema
+  [...basicCatalog2.functions.values()],
+  basicCatalog2.themeSchema
 );
 var RENDERER_NAME = "a2ui_react_adapter";
 var RENDERER_VERSION = "0.1.0";
@@ -187,6 +220,7 @@ var A2UIClientAdapter = class {
   #listeners = /* @__PURE__ */ new Set();
   #actionListeners = /* @__PURE__ */ new Set();
   #errorListeners = /* @__PURE__ */ new Set();
+  #fieldUpdateListeners = /* @__PURE__ */ new Set();
   #surfaceOrder = [];
   #structureBySurface = /* @__PURE__ */ new Map();
   #persistedListRowsByPath = /* @__PURE__ */ new Map();
@@ -203,7 +237,7 @@ var A2UIClientAdapter = class {
   }
   /** Catalog ids this adapter will announce in capability envelopes. */
   get supportedCatalogIds() {
-    return [basicCatalog.id];
+    return [basicCatalog2.id];
   }
   get lastSeq() {
     return this.#lastSeq;
@@ -387,6 +421,10 @@ var A2UIClientAdapter = class {
     this.#errorListeners.add(listener);
     return () => this.#errorListeners.delete(listener);
   };
+  subscribeFieldUpdates = (listener) => {
+    this.#fieldUpdateListeners.add(listener);
+    return () => this.#fieldUpdateListeners.delete(listener);
+  };
   /** Monotonic change counter for `useSyncExternalStore`. */
   getVersion = () => this.#version;
   dispose() {
@@ -403,6 +441,7 @@ var A2UIClientAdapter = class {
     this.#listeners.clear();
     this.#actionListeners.clear();
     this.#errorListeners.clear();
+    this.#fieldUpdateListeners.clear();
   }
   #applySurfaceEnvelope(envelope) {
     const validated = A2uiMessageListSchema.safeParse(envelope.messages);
@@ -469,6 +508,12 @@ var A2UIClientAdapter = class {
       );
       return false;
     }
+    const changedFields = envelope.kind === "snapshot" ? [] : changedFieldNames(
+      previous,
+      candidate,
+      envelope.surfaceId,
+      nextStructure.get(envelope.surfaceId)
+    );
     this.#processor = candidate;
     this.#surfaceOrder = [...candidate.model.surfacesMap.keys()];
     this.#structureBySurface = nextStructure;
@@ -485,8 +530,20 @@ var A2UIClientAdapter = class {
     );
     previous.model.dispose();
     this.#notify();
+    if (changedFields.length > 0) {
+      this.#emitFieldUpdate({
+        surfaceId: envelope.surfaceId,
+        fields: changedFields
+      });
+    }
     return true;
   }
+  #emitFieldUpdate(event) {
+    this.#options.onFieldUpdate?.(event);
+    for (const listener of this.#fieldUpdateListeners) {
+      listener(event);
+    }
+  }
   #createProcessor() {
     return new MessageProcessor(
       [editableDateCatalog],
@@ -1676,6 +1733,25 @@ function cloneJsonArray(value) {
 function isFieldValue(value) {
   return value === null || typeof value === "string" || typeof value === "boolean" || typeof value === "number" && Number.isFinite(value);
 }
+function changedFieldNames(previous, candidate, surfaceId, structure) {
+  const before = previous.model.getSurface(surfaceId);
+  const after = candidate.model.getSurface(surfaceId);
+  if (before === void 0 || after === void 0 || structure === void 0) {
+    return [];
+  }
+  const fields = /* @__PURE__ */ new Set();
+  for (const { field } of structure.fieldsByComponent.values()) {
+    const path = fieldPointer(field);
+    const next = after.dataModel.get(path);
+    if (hasFieldValue(next) && !fieldValueEquivalent(before.dataModel.get(path), next)) {
+      fields.add(field);
+    }
+  }
+  return [...fields];
+}
+function hasFieldValue(value) {
+  return Array.isArray(value) ? value.length > 0 : value !== void 0 && value !== null && value !== "";
+}
 function fieldValueEquivalent(left, right) {
   if (Array.isArray(left) && Array.isArray(right)) {
     return left.length === right.length && left.every((value, index) => Object.is(value, right[index]));
@@ -1714,13 +1790,14 @@ function classifyProcessingError(error) {
 // src/SurfaceHost.tsx
 import {
   Component,
-  useId as useId2,
+  useEffect,
+  useId as useId3,
   useLayoutEffect as useLayoutEffect2,
   useRef as useRef2,
   useSyncExternalStore
 } from "react";
 import { A2uiSurface } from "@a2ui/react/v0_9";
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function A2UISurfaceHost({
   adapter,
   surfaceId,
@@ -1733,7 +1810,8 @@ function A2UISurfaceHost({
   invalidFields = [],
   validationSummaryId,
   noSurfaceFallback,
-  errorFallback
+  errorFallback,
+  onAgentUpdate
 }) {
   const version = useSyncExternalStore(
     adapter.subscribe,
@@ -1747,17 +1825,31 @@ function A2UISurfaceHost({
     readSessionSnapshot,
     readSessionSnapshot
   );
-  const generatedId = useId2().replaceAll(":", "");
+  const generatedId = useId3().replaceAll(":", "");
   const rootRef = useRef2(null);
   const lastFocusedState = useRef2(void 0);
   const lastViewedSection = useRef2(void 0);
   const lastValidationKey = useRef2("");
+  const pendingFieldUpdates = useRef2(/* @__PURE__ */ new Map());
+  const lastCurrentGroupId = useRef2(void 0);
+  const onAgentUpdateRef = useRef2(onAgentUpdate);
+  onAgentUpdateRef.current = onAgentUpdate;
   const resolvedSurfaceMetadata = surfaceMetadata ?? controllerSnapshot?.surface ?? null;
   const editing = controllerSnapshot?.editing ?? editingForSurface(resolvedSurfaceMetadata);
   const surface = surfaceId === void 0 ? adapter.currentSurface : adapter.getSurface(surfaceId);
   const structure = surface === void 0 ? EMPTY_STRUCTURE : adapter.getSurfaceStructure(surface.id);
   const focusKey = surface === void 0 ? void 0 : `${surface.id}:${resolvedSurfaceMetadata?.activeStateId ?? "surface"}`;
   const frameId = hostId ?? `a2ui-surface-${generatedId}`;
+  useEffect(
+    () => adapter.subscribeFieldUpdates((event) => {
+      const pending = pendingFieldUpdates.current.get(event.surfaceId) ?? /* @__PURE__ */ new Set();
+      for (const field of event.fields) {
+        pending.add(field);
+      }
+      pendingFieldUpdates.current.set(event.surfaceId, pending);
+    }),
+    [adapter]
+  );
   useLayoutEffect2(() => {
     const root = rootRef.current;
     if (root === null || surface === void 0) {
@@ -1800,6 +1892,42 @@ function A2UISurfaceHost({
         ),
         setInteractionDisabled(root, disabled || busy)
       ];
+      reportAgentUpdates();
+    };
+    const reportAgentUpdates = () => {
+      const changedFields = [
+        ...pendingFieldUpdates.current.get(surface.id) ?? []
+      ];
+      pendingFieldUpdates.current.clear();
+      const currentGroup = resolvedSurfaceMetadata?.fieldInteractions.find(
+        (group) => group.mode === "current"
+      );
+      const previousGroupId = lastCurrentGroupId.current;
+      if (currentGroup !== void 0) {
+        lastCurrentGroupId.current = currentGroup.groupId;
+      }
+      const report = onAgentUpdateRef.current;
+      if (report === void 0) {
+        return;
+      }
+      if (changedFields.length > 0) {
+        report({
+          reason: "field-value",
+          surfaceId: surface.id,
+          fields: changedFields,
+          element: agentUpdateElement(root, changedFields, structure.fields)
+        });
+      }
+      if (currentGroup !== void 0 && previousGroupId !== void 0 && currentGroup.groupId !== previousGroupId) {
+        const fields = currentGroup.fields.map((binding) => binding.field);
+        report({
+          reason: "current-group",
+          surfaceId: surface.id,
+          fields,
+          groupId: currentGroup.groupId,
+          element: agentUpdateElement(root, fields, structure.fields)
+        });
+      }
     };
     const scheduleControlRefresh = () => {
       queueMicrotask(refreshControls);
@@ -1860,9 +1988,9 @@ function A2UISurfaceHost({
     version
   ]);
   if (surface === void 0) {
-    return noSurfaceFallback ?? /* @__PURE__ */ jsx2("div", { "data-a2ui-host": "no-surface", role: "status", "aria-live": "polite", children: "Your conversation continues by voice." });
+    return noSurfaceFallback ?? /* @__PURE__ */ jsx3("div", { "data-a2ui-host": "no-surface", role: "status", "aria-live": "polite", children: "Your conversation continues by voice." });
   }
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       ref: rootRef,
@@ -1875,13 +2003,13 @@ function A2UISurfaceHost({
       "aria-busy": busy || void 0,
       "aria-disabled": disabled || busy || void 0,
       tabIndex: -1,
-      children: /* @__PURE__ */ jsx2(
+      children: /* @__PURE__ */ jsx3(
         SurfaceErrorBoundary,
         {
           adapter,
           surface,
-          fallback: errorFallback ?? /* @__PURE__ */ jsx2("div", { "data-a2ui-host": "render-error", role: "alert", children: "This step can't be shown right now. Please continue by voice." }),
-          children: /* @__PURE__ */ jsx2(A2uiSurface, { surface })
+          fallback: errorFallback ?? /* @__PURE__ */ jsx3("div", { "data-a2ui-host": "render-error", role: "alert", children: "This step can't be shown right now. Please continue by voice." }),
+          children: /* @__PURE__ */ jsx3(A2uiSurface, { surface })
         },
         surface.id
       )
@@ -1924,6 +2052,33 @@ function focusProgressTarget(root, metadata, invalidFields) {
     });
   }
 }
+function agentUpdateElement(root, fields, descriptors) {
+  const controls = [
+    ...root.querySelectorAll("[data-a2ui-field]")
+  ];
+  for (const field of fields) {
+    const control = controls.find(
+      (candidate) => candidate.dataset.a2uiField === field
+    );
+    if (control !== void 0) {
+      return control.closest("[data-a2ui-date-editor]") ?? control.closest('[role="radiogroup"]') ?? control;
+    }
+    const descriptor = descriptors.find(
+      (candidate) => candidate.field === field
+    );
+    const labels = /* @__PURE__ */ new Set([displayFieldLabel(field)]);
+    if (descriptor !== void 0) {
+      labels.add(descriptor.label);
+    }
+    const label = [
+      ...root.querySelectorAll("label, strong, legend")
+    ].find((candidate) => labels.has(candidate.textContent?.trim() ?? ""));
+    if (label?.parentElement != null && root.contains(label.parentElement)) {
+      return label.parentElement;
+    }
+  }
+  return void 0;
+}
 function isControlDisabled(control) {
   return control.getAttribute("aria-disabled") === "true" || "disabled" in control && control.disabled === true;
 }
@@ -2175,7 +2330,7 @@ var SurfaceErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.failedSurfaceId !== void 0) {
-      return /* @__PURE__ */ jsx2(
+      return /* @__PURE__ */ jsx3(
         "div",
         {
           "data-a2ui-error-boundary": "true",
@@ -2393,7 +2548,7 @@ function blockInvalidActionControls(root) {
   };
 }
 function firstInvalidInput(root) {
-  return [...root.querySelectorAll("input[data-a2ui-field]")].filter((input) => input.type !== "radio" && !isControlDisabled(input)).find((input) => !input.checkValidity());
+  return [...root.querySelectorAll("input[data-a2ui-field], select[data-a2ui-field]")].filter((input) => input.type !== "radio" && !isControlDisabled(input)).find((input) => !input.checkValidity());
 }
 function findFieldControls(root, field) {
   const labels = [...root.querySelectorAll("label")];
@@ -2867,11 +3022,23 @@ function renderSavedLoopEditInputs(editButton, row, orderedFields, summaryFields
       continue;
     }
     let input = value.querySelector(
-      "input[data-a2ui-loop-edit-input='true']"
+      "[data-a2ui-loop-edit-input='true']"
     );
     if (input === null) {
-      input = row.ownerDocument.createElement("input");
-      input.type = "text";
+      if (fieldName === "hospital_preference") {
+        const select = row.ownerDocument.createElement("select");
+        for (const choice of ["", "Prefer", "Avoid"]) {
+          const option = row.ownerDocument.createElement("option");
+          option.value = choice;
+          option.textContent = choice || "Choose Prefer or Avoid";
+          select.appendChild(option);
+        }
+        select.required = true;
+        input = select;
+      } else {
+        input = row.ownerDocument.createElement("input");
+        input.type = "text";
+      }
       input.name = fieldName;
       input.setAttribute("aria-label", displayFieldLabel(fieldName));
       input.dataset.a2uiLoopEditInput = "true";
@@ -2897,7 +3064,7 @@ function renderSavedLoopEditInputs(editButton, row, orderedFields, summaryFields
   setText(editButton, "Save");
   if (focusFirstInput) {
     row.querySelector(
-      "input[data-a2ui-loop-edit-input='true']"
+      "[data-a2ui-loop-edit-input='true']"
     )?.focus();
   }
 }
@@ -2919,7 +3086,7 @@ function savedLoopRowInputValues(orderedFields, summaryFields) {
   orderedFields.forEach((field, index) => {
     const fieldName = summaryFields[index];
     const input = field.querySelector(
-      "input[data-a2ui-loop-edit-input='true']"
+      "[data-a2ui-loop-edit-input='true']"
     );
     const value = field.querySelector(
       "[data-a2ui-loop-cell='value']"
@@ -3001,7 +3168,7 @@ function normalizedLoopSummaryFields(fields) {
   if (hasPharmacyFields) {
     return pharmacyFields.filter((field) => withoutInternal.includes(field));
   }
-  const hospitalFields = ["hospital_name", "hospital_city_state"];
+  const hospitalFields = ["hospital_name", "hospital_city_state", "hospital_preference"];
   const hasHospitalFields = hospitalFields.some(
     (field) => withoutInternal.includes(field)
   );
@@ -3117,7 +3284,8 @@ var LOOP_FIELD_LABELS = /* @__PURE__ */ new Map([
   ["pharmacy type", "pharmacy_type"],
   ["pharmacy address", "pharmacy_address"],
   ["hospital name", "hospital_name"],
-  ["hospital city state", "hospital_city_state"]
+  ["hospital city state", "hospital_city_state"],
+  ["hospital preference", "hospital_preference"]
 ]);
 function isSavedLoopSummary(element) {
   if (element.children.length > 0) {