@ukiahinsure/a2ui-react-adapter 0.1.3 → 0.1.5

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { A as A2UIClientAdapter, a as A2UISurfaceMetadata, b as A2UISessionController, c as A2UIRoomLike } from './session-B_2-bK2s.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-B_2-bK2s.js';
+import { A as A2UIClientAdapter, a as A2UISurfaceMetadata, b as A2UISessionController, c as A2UIRoomLike } from './session-Ckvifx8K.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-Ckvifx8K.js';
 import { ReactNode } from 'react';
 
 /** Accessible host around the official A2UI v0.9.1 React surface. */

package/dist/index.js

@@ -28,6 +28,7 @@ var A2UIClientAdapter = class {
   #errorListeners = /* @__PURE__ */ new Set();
   #surfaceOrder = [];
   #structureBySurface = /* @__PURE__ */ new Map();
+  #persistedListRowsByPath = /* @__PURE__ */ new Map();
   #version = 0;
   #lastSeq = 0;
   #disposed = false;
@@ -72,6 +73,10 @@ var A2UIClientAdapter = class {
     const values = {};
     for (const field of fields) {
       const value = surface.dataModel.get(fieldPointer(field));
+      if (Array.isArray(value) && value.length === 1 && isFieldValue(value[0])) {
+        values[field] = value[0];
+        continue;
+      }
       if (!isFieldValue(value)) {
         return null;
       }
@@ -88,8 +93,9 @@ var A2UIClientAdapter = class {
     let changed = false;
     for (const [field, value] of Object.entries(values)) {
       const path = fieldPointer(field);
-      if (!Object.is(surface.dataModel.get(path), value)) {
-        surface.dataModel.set(path, value);
+      const next = this.#dataModelValueForField(surfaceId, field, value);
+      if (!fieldValueEquivalent(surface.dataModel.get(path), next)) {
+        surface.dataModel.set(path, next);
         changed = true;
       }
     }
@@ -98,6 +104,22 @@ var A2UIClientAdapter = class {
     }
     return true;
   }
+  #dataModelValueForField(surfaceId, field, value) {
+    const descriptor = this.#fieldDescriptor(surfaceId, field);
+    if (descriptor?.control === "choice" && typeof value === "string" && value.length > 0) {
+      return [value];
+    }
+    return value;
+  }
+  #fieldDescriptor(surfaceId, field) {
+    const structure = this.#structureBySurface.get(surfaceId);
+    if (structure === void 0) {
+      return void 0;
+    }
+    return [...structure.fieldsByComponent.values()].find(
+      (descriptor) => descriptor.field === field
+    );
+  }
   /**
    * Apply one validated server envelope. Returns false for duplicates and
    * out-of-order deliveries (the per-session `seq` guard) and for envelopes
@@ -134,6 +156,7 @@ var A2UIClientAdapter = class {
     this.#processor = replacement;
     this.#surfaceOrder = [];
     this.#structureBySurface.clear();
+    this.#persistedListRowsByPath.clear();
     previous.model.dispose();
     this.#notify();
   }
@@ -187,12 +210,28 @@ var A2UIClientAdapter = class {
       );
       return false;
     }
+    const rawMessages = envelope.kind === "snapshot" ? validated.data : mergePersistedListRowsIntoMessages(
+      validated.data,
+      envelope.surfaceId,
+      this.#persistedListRowsByPath
+    );
+    const nextStructure = updateSurfaceStructures(
+      rawMessages,
+      envelope.kind === "snapshot" ? /* @__PURE__ */ new Map() : cloneSurfaceStructures(this.#structureBySurface)
+    );
+    const messages = normalizeChoiceValuesInMessages(
+      rawMessages,
+      envelope.surfaceId,
+      nextStructure.get(envelope.surfaceId)
+    );
     const candidate = this.#createProcessor();
     try {
       if (envelope.kind !== "snapshot") {
         candidate.processMessages(this.#snapshotMessages());
       }
-      candidate.processMessages(validated.data);
+      candidate.processMessages(
+        messages
+      );
     } catch (error) {
       candidate.model.dispose();
       this.reportClientError(
@@ -203,10 +242,6 @@ var A2UIClientAdapter = class {
       return false;
     }
     const previous = this.#processor;
-    const nextStructure = updateSurfaceStructures(
-      validated.data,
-      envelope.kind === "snapshot" ? /* @__PURE__ */ new Map() : cloneSurfaceStructures(this.#structureBySurface)
-    );
     pruneSurfaceStructures(nextStructure, candidate);
     if (!fieldInteractionBindingsTrusted(
       envelope.fieldInteractions ?? [],
@@ -223,6 +258,13 @@ var A2UIClientAdapter = class {
     this.#processor = candidate;
     this.#surfaceOrder = [...candidate.model.surfacesMap.keys()];
     this.#structureBySurface = nextStructure;
+    if (envelope.kind === "snapshot") {
+      this.#persistedListRowsByPath.clear();
+    }
+    rememberPersistedListRows(
+      this.#persistedListRowsByPath,
+      candidate.model.getSurface(envelope.surfaceId)?.dataModel.get("/")
+    );
     previous.model.dispose();
     this.#notify();
     return true;
@@ -403,24 +445,95 @@ function fieldDescriptor(component) {
     ChoicePicker: "choice"
   };
   const control = typeof component.component === "string" ? controls[component.component] : void 0;
+  const componentId = isNonEmptyString(component.id) ? component.id : void 0;
   const value = component.value;
-  const field = isRecord(value) && typeof value.path === "string" ? fieldFromPointer(value.path) : void 0;
-  if (control === void 0 || field === void 0 || !isNonEmptyString(component.id)) {
+  const field = isRecord(value) && typeof value.path === "string" ? fieldFromPointer(value.path) ?? listFieldFromComponentId(componentId) : listFieldFromComponentId(componentId);
+  if (control === void 0 || field === void 0 || componentId === void 0) {
     return void 0;
   }
   return {
-    componentId: component.id,
+    componentId,
     field,
     label: typeof component.label === "string" && component.label.length > 0 ? component.label : field,
     control,
-    required: hasRequiredCheck(component.checks)
+    required: hasRequiredCheck(component.checks),
+    ...typeof component.validationRegexp === "string" ? { validationRegexp: component.validationRegexp } : {},
+    ...typeof component.max === "string" ? { max: component.max } : {}
   };
 }
+function normalizeChoiceValuesInMessages(messages, surfaceId, structure) {
+  if (structure === void 0) {
+    return [...messages];
+  }
+  const choiceFields = new Set(
+    [...structure.fieldsByComponent.values()].filter((field) => field.control === "choice").map((field) => field.field)
+  );
+  if (choiceFields.size === 0) {
+    return [...messages];
+  }
+  return messages.map((message) => {
+    if (!isRecord(message) || !isRecord(message.updateDataModel)) {
+      return message;
+    }
+    const update = message.updateDataModel;
+    if (update.surfaceId !== surfaceId) {
+      return message;
+    }
+    const path = typeof update.path === "string" ? update.path : "/";
+    if (path === "/" && isRecord(update.value)) {
+      const value = cloneJsonRecord(update.value);
+      for (const field2 of choiceFields) {
+        if (Object.hasOwn(value, field2)) {
+          value[field2] = choiceDataModelValue(value[field2]);
+        }
+      }
+      return {
+        ...message,
+        updateDataModel: { ...update, value }
+      };
+    }
+    const field = fieldFromPointer(path);
+    if (field !== void 0 && choiceFields.has(field)) {
+      return {
+        ...message,
+        updateDataModel: {
+          ...update,
+          value: choiceDataModelValue(update.value)
+        }
+      };
+    }
+    return message;
+  });
+}
+function choiceDataModelValue(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  if (typeof value === "string") {
+    return value.length === 0 ? [] : [value];
+  }
+  return value;
+}
 function hasRequiredCheck(value) {
   return Array.isArray(value) && value.some(
     (check) => isRecord(check) && isRecord(check.condition) && check.condition.call === "required"
   );
 }
+function listFieldFromComponentId(componentId) {
+  if (componentId === void 0) {
+    return void 0;
+  }
+  const markers = [":list-new:field:", ":list-row:field:"];
+  for (const marker of markers) {
+    const markerIndex = componentId.indexOf(marker);
+    if (markerIndex < 0) {
+      continue;
+    }
+    const field = componentId.slice(markerIndex + marker.length);
+    return field.length > 0 ? field : void 0;
+  }
+  return void 0;
+}
 function fieldFromPointer(path) {
   if (!path.startsWith("/") || path.length < 2 || path.slice(1).includes("/")) {
     return void 0;
@@ -430,9 +543,150 @@ function fieldFromPointer(path) {
 function fieldPointer(field) {
   return `/${field.replaceAll("~", "~0").replaceAll("/", "~1")}`;
 }
+function mergePersistedListRowsIntoMessages(messages, surfaceId, persistedRowsByPath) {
+  if (persistedRowsByPath.size === 0) {
+    return [...messages];
+  }
+  let mergedRoot = false;
+  const mergedMessages = messages.map((message) => {
+    if (!isRootDataModelUpdate(message, surfaceId)) {
+      return message;
+    }
+    mergedRoot = true;
+    return {
+      ...message,
+      updateDataModel: {
+        ...message.updateDataModel,
+        value: mergePersistedListRowsIntoRoot(
+          message.updateDataModel.value,
+          persistedRowsByPath
+        )
+      }
+    };
+  });
+  if (mergedRoot) {
+    return mergedMessages;
+  }
+  return [
+    ...mergedMessages,
+    {
+      version: "v0.9",
+      updateDataModel: {
+        surfaceId,
+        path: "/",
+        value: mergePersistedListRowsIntoRoot({}, persistedRowsByPath)
+      }
+    }
+  ];
+}
+function mergePersistedListRowsIntoRoot(root, persistedRowsByPath) {
+  const merged = cloneJsonRecord(root);
+  const activeDraftListPaths = activeListDraftPaths(merged);
+  for (const [listPath, rows] of persistedRowsByPath) {
+    const dottedRows = merged[listPath];
+    const nestedRows = getNestedValue(merged, listPath);
+    const incomingRows = Array.isArray(dottedRows) ? dottedRows : Array.isArray(nestedRows) ? nestedRows : void 0;
+    const shouldPreserveCachedRows = rows.length > 0 && (incomingRows === void 0 || incomingRows.length === 0) && !activeDraftListPaths.has(listPath);
+    const effectiveRows = shouldPreserveCachedRows ? rows : incomingRows ?? rows;
+    if (!Array.isArray(dottedRows) || shouldPreserveCachedRows) {
+      merged[listPath] = cloneJsonArray(effectiveRows);
+    }
+    if (!Array.isArray(nestedRows) || shouldPreserveCachedRows) {
+      setNestedValue(merged, listPath, cloneJsonArray(effectiveRows));
+    }
+  }
+  return merged;
+}
+function activeListDraftPaths(root) {
+  const drafts = root.__listDrafts;
+  if (!isRecord(drafts)) {
+    return /* @__PURE__ */ new Set();
+  }
+  return new Set(
+    Object.keys(drafts).filter((listPath) => listPath.trim().length > 0)
+  );
+}
+function rememberPersistedListRows(persistedRowsByPath, root) {
+  if (!isRecord(root)) {
+    return;
+  }
+  for (const [listPath, rows] of listRowsFromRoot(root)) {
+    persistedRowsByPath.set(listPath, cloneJsonArray(rows));
+  }
+}
+function listRowsFromRoot(root) {
+  const rowsByPath = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(root)) {
+    if (key.includes(".") && Array.isArray(value)) {
+      rowsByPath.set(key, cloneJsonArray(value));
+    }
+  }
+  collectNestedListRows(root, [], rowsByPath);
+  return rowsByPath;
+}
+function collectNestedListRows(value, path, rowsByPath) {
+  if (Array.isArray(value)) {
+    if (path.length > 1) {
+      rowsByPath.set(path.join("."), cloneJsonArray(value));
+    }
+    return;
+  }
+  if (!isRecord(value)) {
+    return;
+  }
+  for (const [key, child] of Object.entries(value)) {
+    if (key === "__listDrafts") {
+      continue;
+    }
+    collectNestedListRows(child, [...path, key], rowsByPath);
+  }
+}
+function isRootDataModelUpdate(message, surfaceId) {
+  return isRecord(message) && isRecord(message.updateDataModel) && message.updateDataModel.surfaceId === surfaceId && (message.updateDataModel.path === void 0 || message.updateDataModel.path === "/") && isRecord(message.updateDataModel.value);
+}
+function getNestedValue(root, listPath) {
+  let current = root;
+  for (const segment of listPath.split(".")) {
+    if (!isRecord(current)) {
+      return void 0;
+    }
+    current = current[segment];
+  }
+  return current;
+}
+function setNestedValue(root, listPath, value) {
+  const segments = listPath.split(".");
+  let current = root;
+  for (const segment of segments.slice(0, -1)) {
+    const next = current[segment];
+    if (isRecord(next)) {
+      current = next;
+      continue;
+    }
+    const created = {};
+    current[segment] = created;
+    current = created;
+  }
+  const leaf = segments.at(-1);
+  if (leaf !== void 0) {
+    current[leaf] = value;
+  }
+}
+function cloneJsonRecord(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+function cloneJsonArray(value) {
+  return JSON.parse(JSON.stringify(value));
+}
 function isFieldValue(value) {
   return value === null || typeof value === "string" || typeof value === "boolean" || typeof value === "number" && Number.isFinite(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]));
+  }
+  return Object.is(left, right);
+}
 function tabDescriptors(component) {
   if (component.component !== "Tabs" || !isNonEmptyString(component.id) || !Array.isArray(component.tabs)) {
     return [];
@@ -542,6 +796,7 @@ function A2UISurfaceHost({
           resolvedSurfaceMetadata?.fieldInteractions ?? []
         ),
         annotateActionControls(root),
+        blockInvalidActionControls(root),
         setPendingGroupsDisabled(
           root,
           new Set(editing.pendingGroupIds)
@@ -910,7 +1165,11 @@ function annotateFields(root, fields, invalidFields, validationSummaryId) {
           field: control.dataset.a2uiField,
           required: control.getAttribute("aria-required"),
           invalid: control.getAttribute("aria-invalid"),
-          describedBy: control.getAttribute("aria-describedby")
+          describedBy: control.getAttribute("aria-describedby"),
+          pattern: control.getAttribute("pattern"),
+          max: control.getAttribute("max"),
+          inputMode: control.getAttribute("inputmode"),
+          maxLength: control.getAttribute("maxlength")
         });
       }
       control.dataset.a2uiField = field.field;
@@ -930,6 +1189,11 @@ function annotateFields(root, fields, invalidFields, validationSummaryId) {
           );
         }
       }
+      applyControlValidationAttributes(control, field);
+      const cleanup = attachControlValidationBehavior(control, field);
+      if (cleanup !== void 0) {
+        matchCleanups.push(cleanup);
+      }
     }
   }
   return () => {
@@ -942,12 +1206,108 @@ function annotateFields(root, fields, invalidFields, validationSummaryId) {
       restoreAttribute(control, "aria-required", original.required);
       restoreAttribute(control, "aria-invalid", original.invalid);
       restoreAttribute(control, "aria-describedby", original.describedBy);
+      restoreAttribute(control, "pattern", original.pattern);
+      restoreAttribute(control, "max", original.max);
+      restoreAttribute(control, "inputmode", original.inputMode);
+      restoreAttribute(control, "maxlength", original.maxLength);
     }
     for (const cleanup of matchCleanups.reverse()) {
       cleanup();
     }
   };
 }
+function applyControlValidationAttributes(control, field) {
+  if (field.validationRegexp !== void 0) {
+    control.setAttribute("pattern", field.validationRegexp);
+  }
+  if (field.max !== void 0) {
+    control.setAttribute("max", field.max);
+  }
+  if (isPhoneValidationRegexp(field.validationRegexp)) {
+    control.setAttribute("inputmode", "numeric");
+    control.setAttribute("maxlength", "10");
+  } else if (isZipValidationRegexp(field.validationRegexp)) {
+    control.setAttribute("inputmode", "numeric");
+    control.setAttribute("maxlength", "5");
+  } else if (isIntegerValidationRegexp(field.validationRegexp)) {
+    control.setAttribute("inputmode", "numeric");
+    control.setAttribute("maxlength", "2");
+  }
+}
+function attachControlValidationBehavior(control, field) {
+  const maxLength = numericMaxLengthForField(field);
+  if (maxLength === void 0 || !isTextInput(control)) {
+    return void 0;
+  }
+  const sanitize = () => {
+    const next = control.value.replace(/\D/g, "").slice(0, maxLength);
+    if (control.value !== next) {
+      control.value = next;
+      control.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+  };
+  control.addEventListener("input", sanitize);
+  control.addEventListener("change", sanitize);
+  sanitize();
+  return () => {
+    control.removeEventListener("input", sanitize);
+    control.removeEventListener("change", sanitize);
+  };
+}
+function numericMaxLengthForField(field) {
+  if (isPhoneValidationRegexp(field.validationRegexp)) {
+    return 10;
+  }
+  if (isZipValidationRegexp(field.validationRegexp)) {
+    return 5;
+  }
+  if (isIntegerValidationRegexp(field.validationRegexp)) {
+    return 2;
+  }
+  return void 0;
+}
+function isPhoneValidationRegexp(pattern) {
+  return pattern === "^[2-9]\\d{2}[2-9]\\d{6}$" || pattern?.startsWith("^(?:") === true && pattern.endsWith(")[2-9]\\d{6}$");
+}
+function isZipValidationRegexp(pattern) {
+  return pattern === "^(?!00000$)\\d{5}$" || pattern === "^(?:00(?:50[1-9]|5[1-9][0-9]|[6-9][0-9]{2})|0[1-9][0-9]{3}|[1-8][0-9]{4}|9[0-8][0-9]{3}|99[0-8][0-9]{2}|999[0-4][0-9]|99950)$";
+}
+function isIntegerValidationRegexp(pattern) {
+  return pattern === "^\\d{1,2}$";
+}
+function isTextInput(element) {
+  return element instanceof HTMLInputElement && element.type !== "radio";
+}
+function blockInvalidActionControls(root) {
+  const blockIfInvalid = (event) => {
+    const target = event.target;
+    if (!(target instanceof HTMLElement)) {
+      return;
+    }
+    const action = target.closest("[data-a2ui-action='true']");
+    if (action === null || !root.contains(action)) {
+      return;
+    }
+    const invalid2 = firstInvalidInput(root);
+    if (invalid2 === void 0) {
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    invalid2.setAttribute("aria-invalid", "true");
+    invalid2.reportValidity();
+    invalid2.focus();
+  };
+  root.addEventListener("click", blockIfInvalid, true);
+  root.addEventListener("keydown", blockIfInvalid, true);
+  return () => {
+    root.removeEventListener("click", blockIfInvalid, true);
+    root.removeEventListener("keydown", blockIfInvalid, true);
+  };
+}
+function firstInvalidInput(root) {
+  return [...root.querySelectorAll("input[data-a2ui-field]")].filter((input) => input.type !== "radio" && !isControlDisabled(input)).find((input) => !input.checkValidity());
+}
 function findFieldControls(root, field) {
   const labels = [...root.querySelectorAll("label")];
   const label = labels.find(
@@ -1622,8 +1982,26 @@ function decodeRendererAction(event) {
     return entries.length === 0 ? { action } : null;
   }
   if (action === "flow.submit") {
+    const listPath = event.context.listPath;
+    if (typeof listPath === "string" && listPath.length > 0) {
+      const fieldEntries2 = entries.filter(([key]) => key !== "listPath");
+      const fields3 = scalarFields(fieldEntries2);
+      if (fields3 === null) {
+        return null;
+      }
+      return {
+        action,
+        payload: {
+          listPath,
+          ...Object.keys(fields3).length > 0 ? { fields: fields3 } : {}
+        }
+      };
+    }
     const fields2 = scalarFields(entries);
-    return fields2 === null || Object.keys(fields2).length === 0 ? null : { action, payload: { fields: fields2 } };
+    if (fields2 === null) {
+      return null;
+    }
+    return Object.keys(fields2).length === 0 ? { action, payload: {} } : { action, payload: { fields: fields2 } };
   }
   if (action === "flow.list.add" || action === "flow.list.update" || action === "flow.list.delete") {
     const listPath = event.context.listPath;