@ukiahinsure/a2ui-react-adapter 0.1.12 → 0.1.14

package/dist/index.js

@@ -13,9 +13,65 @@ import {
 import { basicCatalog } from "@a2ui/react/v0_9";
 import {
   A2uiError,
+  Catalog,
   A2uiMessageListSchema,
   MessageProcessor
 } from "@a2ui/web_core/v0_9";
+
+// src/DateTimeInput.tsx
+import { useId, useLayoutEffect, useRef } from "react";
+import { createComponentImplementation } from "@a2ui/react/v0_9";
+import { DateTimeInputApi } from "@a2ui/web_core/v0_9/basic_catalog";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DateTimeInput = createComponentImplementation(
+  DateTimeInputApi,
+  ({ props }) => {
+    const id = useId();
+    const inputRef = useRef(null);
+    const initialValue = useRef(props.value || "");
+    const type = props.enableDate && !props.enableTime ? "date" : !props.enableDate && props.enableTime ? "time" : "datetime-local";
+    useLayoutEffect(() => {
+      const input = inputRef.current;
+      if (input && input.ownerDocument.activeElement !== input && input.value !== (props.value || "")) {
+        input.value = props.value || "";
+      }
+    }, [props.value]);
+    return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "var(--a2ui-spacing-xs, 0.25rem)" }, children: [
+      props.label && /* @__PURE__ */ jsx("label", { htmlFor: id, style: { fontSize: "var(--a2ui-label-font-size, var(--a2ui-font-size-s))", fontWeight: "bold" }, children: props.label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id,
+          type,
+          "data-a2ui-native-date-draft": "true",
+          defaultValue: initialValue.current,
+          onChange: (event) => props.setValue(event.currentTarget.value),
+          min: typeof props.min === "string" ? props.min : void 0,
+          max: typeof props.max === "string" ? props.max : void 0,
+          style: {
+            backgroundColor: "var(--a2ui-datetimeinput-background, var(--a2ui-color-input, #fff))",
+            color: "var(--a2ui-datetimeinput-color, var(--a2ui-color-on-input, #333))",
+            border: "var(--a2ui-datetimeinput-border, var(--a2ui-border))",
+            borderRadius: "var(--a2ui-datetimeinput-border-radius, var(--a2ui-border-radius))",
+            padding: "var(--a2ui-datetimeinput-padding, var(--a2ui-spacing-s))",
+            boxSizing: "border-box"
+          }
+        }
+      )
+    ] });
+  }
+);
+
+// src/adapter.ts
+var editableDateCatalog = new Catalog(
+  basicCatalog.id,
+  [...basicCatalog.components.values()].map(
+    (component) => component.name === DateTimeInput.name ? DateTimeInput : component
+  ),
+  [...basicCatalog.functions.values()],
+  basicCatalog.themeSchema
+);
 var RENDERER_NAME = "a2ui_react_adapter";
 var RENDERER_VERSION = "0.1.0";
 var A2UIClientAdapter = class {
@@ -30,6 +86,9 @@ var A2UIClientAdapter = class {
   #structureBySurface = /* @__PURE__ */ new Map();
   #persistedListRowsByPath = /* @__PURE__ */ new Map();
   #deletedListItemIdsByPath = /* @__PURE__ */ new Map();
+  #stagedListRowUpdatesBySurface = /* @__PURE__ */ new Map();
+  #activeListRowEditsBySurface = /* @__PURE__ */ new Map();
+  #optimisticListRowsByPath = /* @__PURE__ */ new Map();
   #version = 0;
   #lastSeq = 0;
   #disposed = false;
@@ -105,6 +164,38 @@ var A2UIClientAdapter = class {
     }
     return true;
   }
+  stageListRowUpdate(surfaceId, values) {
+    this.#stagedListRowUpdatesBySurface.set(surfaceId, { ...values });
+  }
+  beginListRowEdit(surfaceId, rowKey, values) {
+    let edits = this.#activeListRowEditsBySurface.get(surfaceId);
+    if (edits === void 0) {
+      edits = /* @__PURE__ */ new Map();
+      this.#activeListRowEditsBySurface.set(surfaceId, edits);
+    }
+    edits.set(rowKey, { ...values });
+  }
+  updateListRowEdit(surfaceId, rowKey, values) {
+    const edits = this.#activeListRowEditsBySurface.get(surfaceId);
+    if (edits?.has(rowKey) !== true) {
+      return;
+    }
+    edits.set(rowKey, { ...values });
+  }
+  getListRowEdit(surfaceId, rowKey) {
+    const values = this.#activeListRowEditsBySurface.get(surfaceId)?.get(rowKey);
+    return values === void 0 ? void 0 : { ...values };
+  }
+  clearListRowEdit(surfaceId, rowKey) {
+    const edits = this.#activeListRowEditsBySurface.get(surfaceId);
+    if (edits === void 0) {
+      return;
+    }
+    edits.delete(rowKey);
+    if (edits.size === 0) {
+      this.#activeListRowEditsBySurface.delete(surfaceId);
+    }
+  }
   #dataModelValueForField(surfaceId, field, value) {
     const descriptor = this.#fieldDescriptor(surfaceId, field);
     if (descriptor?.control === "choice" && typeof value === "string" && value.length > 0) {
@@ -159,6 +250,8 @@ var A2UIClientAdapter = class {
     this.#structureBySurface.clear();
     this.#persistedListRowsByPath.clear();
     this.#deletedListItemIdsByPath.clear();
+    this.#activeListRowEditsBySurface.clear();
+    this.#optimisticListRowsByPath.clear();
     previous.model.dispose();
     this.#notify();
   }
@@ -198,6 +291,10 @@ var A2UIClientAdapter = class {
     this.#disposed = true;
     this.#processor.model.dispose();
     this.#structureBySurface.clear();
+    this.#persistedListRowsByPath.clear();
+    this.#deletedListItemIdsByPath.clear();
+    this.#activeListRowEditsBySurface.clear();
+    this.#optimisticListRowsByPath.clear();
     this.#listeners.clear();
     this.#actionListeners.clear();
     this.#errorListeners.clear();
@@ -216,7 +313,8 @@ var A2UIClientAdapter = class {
       validated.data,
       envelope.surfaceId,
       this.#persistedListRowsByPath,
-      this.#deletedListItemIdsByPath
+      this.#deletedListItemIdsByPath,
+      this.#optimisticListRowsByPath
     );
     const listAddFreeMessages = removeListAddActionMessages(
       rawMessages,
@@ -272,6 +370,8 @@ var A2UIClientAdapter = class {
     if (envelope.kind === "snapshot") {
       this.#persistedListRowsByPath.clear();
       this.#deletedListItemIdsByPath.clear();
+      this.#activeListRowEditsBySurface.clear();
+      this.#optimisticListRowsByPath.clear();
     }
     rememberPersistedListRows(
       this.#persistedListRowsByPath,
@@ -284,7 +384,7 @@ var A2UIClientAdapter = class {
   }
   #createProcessor() {
     return new MessageProcessor(
-      [basicCatalog],
+      [editableDateCatalog],
       (action) => this.#emitAction(action)
     );
   }
@@ -297,11 +397,18 @@ var A2UIClientAdapter = class {
       );
       return;
     }
+    const stagedListRowUpdate = action.name === "flow.list.update" ? this.#stagedListRowUpdatesBySurface.get(action.surfaceId) : void 0;
+    if (stagedListRowUpdate !== void 0) {
+      this.#stagedListRowUpdatesBySurface.delete(action.surfaceId);
+    }
     const event = {
       actionName: action.name,
       surfaceId: action.surfaceId,
       sourceComponentId: action.sourceComponentId,
-      context: { ...action.context }
+      context: {
+        ...action.context,
+        ...stagedListRowUpdate ?? {}
+      }
     };
     const submittedProviderRow = submittedProviderRowFromEvent(event);
     if (submittedProviderRow !== void 0) {
@@ -314,6 +421,9 @@ var A2UIClientAdapter = class {
     if (event.actionName === "flow.list.delete") {
       this.#removeDeletedListRow(event.surfaceId, event.context);
     }
+    if (event.actionName === "flow.list.update") {
+      this.#updateListRow(event.surfaceId, event.context);
+    }
     this.#options.onAction?.(event);
     for (const listener of this.#actionListeners) {
       listener(event);
@@ -348,6 +458,7 @@ var A2UIClientAdapter = class {
     const cachedRows = this.#persistedListRowsByPath.get(listPath) ?? [];
     const nextRows = removeListRowByItemId(cachedRows, itemId);
     this.#persistedListRowsByPath.set(listPath, nextRows);
+    this.#optimisticListRowsByPath.get(listPath)?.delete(itemId);
     rememberDeletedListItemId(this.#deletedListItemIdsByPath, listPath, itemId);
     const surface = this.#processor.model.getSurface(surfaceId);
     if (surface === void 0) {
@@ -360,6 +471,39 @@ var A2UIClientAdapter = class {
     );
     this.#notify();
   }
+  #updateListRow(surfaceId, context) {
+    const listPath = context.listPath;
+    const itemId = context.itemId;
+    if (typeof listPath !== "string" || listPath.length === 0 || typeof itemId !== "string" || itemId.length === 0) {
+      return;
+    }
+    const cachedRows = this.#persistedListRowsByPath.get(listPath) ?? [];
+    const existingRow = cachedRows.find(
+      (candidate) => isRecord(candidate) && candidate.itemId === itemId
+    );
+    const row = updateListRowFromContext(context, existingRow);
+    if (row === void 0) {
+      return;
+    }
+    const rows = normalizeListRows(listPath, upsertListRow(cachedRows, row));
+    this.#persistedListRowsByPath.set(listPath, rows);
+    let optimisticRows = this.#optimisticListRowsByPath.get(listPath);
+    if (optimisticRows === void 0) {
+      optimisticRows = /* @__PURE__ */ new Map();
+      this.#optimisticListRowsByPath.set(listPath, optimisticRows);
+    }
+    optimisticRows.set(itemId, cloneJsonRecord(row));
+    const surface = this.#processor.model.getSurface(surfaceId);
+    if (surface === void 0) {
+      return;
+    }
+    surface.dataModel.set(`/${listPath}`, cloneJsonArray(rows));
+    surface.dataModel.set(
+      `/${listPath.replaceAll(".", "/")}`,
+      cloneJsonArray(rows)
+    );
+    this.#notify();
+  }
   #snapshotMessages() {
     const messages = [];
     for (const surface of this.#processor.model.surfacesMap.values()) {
@@ -859,8 +1003,8 @@ function fieldFromPointer(path) {
 function fieldPointer(field) {
   return `/${field.replaceAll("~", "~0").replaceAll("/", "~1")}`;
 }
-function mergePersistedListRowsIntoMessages(messages, surfaceId, persistedRowsByPath, deletedItemIdsByPath) {
-  if (persistedRowsByPath.size === 0 && deletedItemIdsByPath.size === 0) {
+function mergePersistedListRowsIntoMessages(messages, surfaceId, persistedRowsByPath, deletedItemIdsByPath, optimisticRowsByPath) {
+  if (persistedRowsByPath.size === 0 && deletedItemIdsByPath.size === 0 && optimisticRowsByPath.size === 0) {
     return [...messages];
   }
   let mergedRoot = false;
@@ -876,7 +1020,8 @@ function mergePersistedListRowsIntoMessages(messages, surfaceId, persistedRowsBy
         value: mergePersistedListRowsIntoRoot(
           message.updateDataModel.value,
           persistedRowsByPath,
-          deletedItemIdsByPath
+          deletedItemIdsByPath,
+          optimisticRowsByPath
         )
       }
     };
@@ -894,26 +1039,33 @@ function mergePersistedListRowsIntoMessages(messages, surfaceId, persistedRowsBy
         value: mergePersistedListRowsIntoRoot(
           {},
           persistedRowsByPath,
-          deletedItemIdsByPath
+          deletedItemIdsByPath,
+          optimisticRowsByPath
         )
       }
     }
   ];
 }
-function mergePersistedListRowsIntoRoot(root, persistedRowsByPath, deletedItemIdsByPath) {
+function mergePersistedListRowsIntoRoot(root, persistedRowsByPath, deletedItemIdsByPath, optimisticRowsByPath) {
   const merged = cloneJsonRecord(root);
   for (const listPath of /* @__PURE__ */ new Set([
     ...persistedRowsByPath.keys(),
-    ...deletedItemIdsByPath.keys()
+    ...deletedItemIdsByPath.keys(),
+    ...optimisticRowsByPath.keys()
   ])) {
     const rows = persistedRowsByPath.get(listPath) ?? [];
+    const optimisticRows = optimisticRowsByPath.get(listPath);
     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 && (!hasListDraft(merged, listPath) || hasBlankListDraft(merged, listPath)));
     const effectiveRows = shouldPreserveCachedRows ? rows : incomingRows ?? rows;
-    const visibleRows = filterDeletedListRows(
+    const optimisticEffectiveRows = mergeOptimisticListRows(
       effectiveRows,
+      optimisticRows
+    );
+    const visibleRows = filterDeletedListRows(
+      optimisticEffectiveRows,
       deletedItemIdsByPath.get(listPath)
     );
     const normalizedRows = normalizeListRows(listPath, visibleRows, merged);
@@ -949,6 +1101,16 @@ function isBlankDraftValue(value) {
   }
   return false;
 }
+function mergeOptimisticListRows(rows, optimisticRows) {
+  if (optimisticRows === void 0 || optimisticRows.size === 0) {
+    return cloneJsonArray(rows);
+  }
+  let merged = cloneJsonArray(rows);
+  for (const row of optimisticRows.values()) {
+    merged = upsertListRow(merged, cloneJsonRecord(row));
+  }
+  return merged;
+}
 function rememberPersistedListRows(persistedRowsByPath, deletedItemIdsByPath, root) {
   if (!isRecord(root)) {
     return;
@@ -1192,6 +1354,35 @@ function isProviderSubmitLabel(label) {
 function normalizeFieldKey(key) {
   return key.trim().toLowerCase().replaceAll(/[^a-z0-9]+/g, "_").replaceAll(/^_+|_+$/g, "");
 }
+function updateListRowFromContext(context, existingRow) {
+  const itemId = context.itemId;
+  if (typeof itemId !== "string" || itemId.length === 0) {
+    return void 0;
+  }
+  const row = isRecord(existingRow) ? cloneJsonRecord(existingRow) : {};
+  row.itemId = itemId;
+  let hasUpdate = false;
+  for (const [key, value] of Object.entries(context)) {
+    if (key === "listPath" || key === "itemId" || !isFieldValue(value)) {
+      continue;
+    }
+    row[key] = value;
+    hasUpdate = true;
+  }
+  if (!hasUpdate) {
+    return void 0;
+  }
+  row.__displayText = listRowDisplayText(row);
+  return row;
+}
+function listRowDisplayText(row) {
+  return Object.entries(row).filter(([key, value]) => {
+    if (key === "itemId" || key === "__displayText" || value === null) {
+      return false;
+    }
+    return isFieldValue(value) && String(value).trim().length > 0;
+  }).map(([key, value]) => `${key}: ${String(value).trim()}`).join(" | ");
+}
 function upsertListRow(rows, row) {
   const itemId = row.itemId;
   if (typeof itemId !== "string" || itemId.length === 0) {
@@ -1434,13 +1625,13 @@ function classifyProcessingError(error) {
 // src/SurfaceHost.tsx
 import {
   Component,
-  useId,
-  useLayoutEffect,
-  useRef,
+  useId as useId2,
+  useLayoutEffect as useLayoutEffect2,
+  useRef as useRef2,
   useSyncExternalStore
 } from "react";
 import { A2uiSurface } from "@a2ui/react/v0_9";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function A2UISurfaceHost({
   adapter,
   surfaceId,
@@ -1467,18 +1658,18 @@ function A2UISurfaceHost({
     readSessionSnapshot,
     readSessionSnapshot
   );
-  const generatedId = useId().replaceAll(":", "");
-  const rootRef = useRef(null);
-  const lastFocusedState = useRef(void 0);
-  const lastViewedSection = useRef(void 0);
-  const lastValidationKey = useRef("");
+  const generatedId = useId2().replaceAll(":", "");
+  const rootRef = useRef2(null);
+  const lastFocusedState = useRef2(void 0);
+  const lastViewedSection = useRef2(void 0);
+  const lastValidationKey = useRef2("");
   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}`;
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const root = rootRef.current;
     if (root === null || surface === void 0) {
       return;
@@ -1500,7 +1691,7 @@ function A2UISurfaceHost({
           validationSummaryId
         ),
         formatFieldLabels(root),
-        annotateSavedLoopTables(root),
+        annotateSavedLoopTables(root, adapter, surface.id),
         bindFieldInteractionGroups(
           root,
           resolvedSurfaceMetadata?.fieldInteractions ?? [],
@@ -1580,9 +1771,9 @@ function A2UISurfaceHost({
     version
   ]);
   if (surface === void 0) {
-    return noSurfaceFallback ?? /* @__PURE__ */ jsx("div", { "data-a2ui-host": "no-surface", role: "status", "aria-live": "polite", children: "Your conversation continues by voice." });
+    return noSurfaceFallback ?? /* @__PURE__ */ jsx2("div", { "data-a2ui-host": "no-surface", role: "status", "aria-live": "polite", children: "Your conversation continues by voice." });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       ref: rootRef,
@@ -1595,13 +1786,13 @@ function A2UISurfaceHost({
       "aria-busy": busy || void 0,
       "aria-disabled": disabled || busy || void 0,
       tabIndex: -1,
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx2(
         SurfaceErrorBoundary,
         {
           adapter,
           surface,
-          fallback: errorFallback ?? /* @__PURE__ */ jsx("div", { "data-a2ui-host": "render-error", role: "alert", children: "This step can't be shown right now. Please continue by voice." }),
-          children: /* @__PURE__ */ jsx(A2uiSurface, { 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 })
         },
         surface.id
       )
@@ -1887,7 +2078,7 @@ var SurfaceErrorBoundary = class extends Component {
   }
   render() {
     if (this.state.failedSurfaceId !== void 0) {
-      return /* @__PURE__ */ jsx(
+      return /* @__PURE__ */ jsx2(
         "div",
         {
           "data-a2ui-error-boundary": "true",
@@ -2188,9 +2379,10 @@ function generatedFieldLabelName(text) {
   const unwrapped = trimmed.startsWith("*") && trimmed.endsWith("*") ? trimmed.slice(1, -1).trim() : trimmed;
   return /^[A-Za-z][A-Za-z0-9_]*$/.test(unwrapped) && /[_A-Z]/.test(unwrapped) ? unwrapped : void 0;
 }
-function annotateSavedLoopTables(root) {
+function annotateSavedLoopTables(root, adapter, surfaceId) {
   const originals = /* @__PURE__ */ new Map();
   const textOriginals = /* @__PURE__ */ new Map();
+  const listeners = [];
   const remember = (element) => {
     if (originals.has(element)) {
       return;
@@ -2205,6 +2397,7 @@ function annotateSavedLoopTables(root) {
       loopColumnCount: element.dataset.a2uiLoopColumnCount,
       loopLabel: element.dataset.a2uiLoopLabel,
       generatedHeader: element.dataset.a2uiLoopGeneratedHeader,
+      actionControl: element.dataset.a2uiLoopActionControl,
       hidden: element.getAttribute("hidden"),
       ariaHidden: element.getAttribute("aria-hidden")
     });
@@ -2215,6 +2408,10 @@ function annotateSavedLoopTables(root) {
     }
     element.textContent = text;
   };
+  const commitText = (element, text) => {
+    textOriginals.set(element, text);
+    element.textContent = text;
+  };
   const generatedElements = [];
   const rows = [...root.querySelectorAll("div, section, article, li")].filter(
     (row) => getSavedLoopRowFields(row).length > 0 && normalizedLoopSummaryFields(getSavedLoopSummaryFields(row)).length >= 2
@@ -2294,10 +2491,23 @@ function annotateSavedLoopTables(root) {
         child.dataset.a2uiLoopColumn = String(Math.floor(columnIndex / 2) + 1);
         columnIndex += 1;
       }
-      normalizeSavedLoopRow(row, rowIndex, remember, setText, generatedElements);
+      normalizeSavedLoopRow(
+        row,
+        rowIndex,
+        remember,
+        setText,
+        commitText,
+        generatedElements,
+        listeners,
+        adapter,
+        surfaceId
+      );
     });
   }
   return () => {
+    for (const remove of listeners.reverse()) {
+      remove();
+    }
     for (const [element, original] of originals) {
       restoreDataset(element, "a2uiLoopTable", original.loopTable);
       restoreDataset(element, "a2uiLoopRow", original.loopRow);
@@ -2312,6 +2522,7 @@ function annotateSavedLoopTables(root) {
         "a2uiLoopGeneratedHeader",
         original.generatedHeader
       );
+      restoreDataset(element, "a2uiLoopActionControl", original.actionControl);
       restoreAttribute(element, "hidden", original.hidden);
       restoreAttribute(element, "aria-hidden", original.ariaHidden);
     }
@@ -2319,6 +2530,14 @@ function annotateSavedLoopTables(root) {
       element.textContent = text;
     }
     for (const element of generatedElements) {
+      if (element.dataset.a2uiGeneratedLoopActionCell === "true") {
+        const parent = element.parentElement;
+        if (parent !== null) {
+          while (element.firstChild !== null) {
+            parent.insertBefore(element.firstChild, element);
+          }
+        }
+      }
       element.remove();
     }
   };
@@ -2346,7 +2565,7 @@ function buildSavedLoopHeader(parent, firstRow) {
   header.appendChild(action);
   return header;
 }
-function normalizeSavedLoopRow(row, rowIndex, remember, setText, generatedElements) {
+function normalizeSavedLoopRow(row, rowIndex, remember, setText, commitText, generatedElements, listeners, adapter, surfaceId) {
   const summaryFields = normalizedLoopSummaryFields(getSavedLoopSummaryFields(row));
   if (summaryFields.length < 2) {
     return;
@@ -2356,6 +2575,7 @@ function normalizeSavedLoopRow(row, rowIndex, remember, setText, generatedElemen
   const fields = [...row.querySelectorAll("[data-a2ui-loop-field='true']")];
   const summaryValues = getSavedLoopSummaryValues(row);
   const action = row.querySelector("[data-a2ui-loop-cell='action']");
+  const save = row.querySelector("[data-a2ui-loop-cell='save']");
   const orderedFields = summaryFields.slice(0, columnCount).map((fieldName) => {
     const field = findSavedLoopField(fields, fieldName);
     if (field !== void 0) {
@@ -2394,9 +2614,27 @@ function normalizeSavedLoopRow(row, rowIndex, remember, setText, generatedElemen
       value.dataset.a2uiLoopCell = "value";
     }
   });
+  const rowEditValues = savedLoopRowEditValues(orderedFields, summaryFields);
+  const rowKey = savedLoopRowEditKey(rowIndex, summaryFields, rowEditValues);
   if (action !== null) {
     remember(action);
     action.dataset.a2uiLoopColumn = String(columnCount + 1);
+    createSavedLoopActionCell(
+      row,
+      save,
+      action,
+      columnCount + 1,
+      remember,
+      setText,
+      commitText,
+      generatedElements,
+      listeners,
+      adapter,
+      surfaceId,
+      rowKey,
+      orderedFields,
+      summaryFields.slice(0, columnCount)
+    );
   }
   for (const field of fields) {
     if (orderedFields.includes(field)) {
@@ -2408,6 +2646,202 @@ function normalizeSavedLoopRow(row, rowIndex, remember, setText, generatedElemen
     field.setAttribute("aria-hidden", "true");
   }
 }
+function createSavedLoopActionCell(row, save, action, column, remember, setText, commitText, generatedElements, listeners, adapter, surfaceId, rowKey, orderedFields, summaryFields) {
+  if (save === null) {
+    return void 0;
+  }
+  remember(save);
+  remember(action);
+  const actionCell = row.ownerDocument.createElement("div");
+  const editButton = row.ownerDocument.createElement("button");
+  editButton.type = "button";
+  actionCell.dataset.a2uiLoopCell = "action";
+  actionCell.dataset.a2uiLoopColumn = String(column);
+  actionCell.dataset.a2uiLoopActionGroup = "true";
+  actionCell.dataset.a2uiGeneratedLoopActionCell = "true";
+  editButton.dataset.a2uiLoopCell = "edit";
+  editButton.dataset.a2uiLoopColumn = String(column);
+  editButton.dataset.a2uiGeneratedLoopEditButton = "true";
+  editButton.textContent = "Edit";
+  row.insertBefore(actionCell, action);
+  actionCell.append(editButton, save, action);
+  save.dataset.a2uiLoopCell = "save";
+  save.dataset.a2uiLoopColumn = String(column);
+  save.setAttribute("hidden", "");
+  save.setAttribute("aria-hidden", "true");
+  action.dataset.a2uiLoopColumn = String(column);
+  listeners.push(
+    bindSavedLoopEditAction(
+      editButton,
+      save,
+      row,
+      orderedFields,
+      summaryFields,
+      adapter,
+      surfaceId,
+      rowKey,
+      setText,
+      commitText,
+      generatedElements,
+      listeners
+    )
+  );
+  const activeEditValues = adapter.getListRowEdit(surfaceId, rowKey);
+  if (activeEditValues !== void 0) {
+    renderSavedLoopEditInputs(
+      editButton,
+      row,
+      orderedFields,
+      summaryFields,
+      adapter,
+      surfaceId,
+      rowKey,
+      setText,
+      generatedElements,
+      listeners,
+      activeEditValues,
+      false
+    );
+  }
+  generatedElements.push(editButton);
+  generatedElements.push(actionCell);
+  delete action.dataset.a2uiLoopCell;
+  delete action.dataset.a2uiLoopColumn;
+  action.dataset.a2uiLoopActionControl = "true";
+  return actionCell;
+}
+function bindSavedLoopEditAction(editButton, submitButton, row, orderedFields, summaryFields, adapter, surfaceId, rowKey, setText, commitText, generatedElements, listeners) {
+  const onClick = (event) => {
+    if (adapter.getListRowEdit(surfaceId, rowKey) === void 0) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      const values2 = savedLoopRowEditValues(orderedFields, summaryFields);
+      adapter.beginListRowEdit(surfaceId, rowKey, values2);
+      renderSavedLoopEditInputs(
+        editButton,
+        row,
+        orderedFields,
+        summaryFields,
+        adapter,
+        surfaceId,
+        rowKey,
+        setText,
+        generatedElements,
+        listeners,
+        values2,
+        true
+      );
+      return;
+    }
+    event.preventDefault();
+    event.stopImmediatePropagation();
+    const values = savedLoopRowInputValues(orderedFields, summaryFields);
+    adapter.clearListRowEdit(surfaceId, rowKey);
+    delete row.dataset.a2uiLoopEditing;
+    setText(editButton, "Edit");
+    orderedFields.forEach((field, index) => {
+      const fieldName = summaryFields[index];
+      const value = field.querySelector(
+        "[data-a2ui-loop-cell='value']"
+      );
+      if (fieldName !== void 0 && value !== null) {
+        commitText(value, stringEditValue(values[fieldName]));
+      }
+    });
+    adapter.stageListRowUpdate(surfaceId, values);
+    window.setTimeout(() => {
+      const clickable = submitButton instanceof HTMLButtonElement ? submitButton : submitButton.querySelector("button");
+      (clickable ?? submitButton).click();
+    }, 0);
+  };
+  editButton.addEventListener("click", onClick, { capture: true });
+  return () => {
+    editButton.removeEventListener("click", onClick, { capture: true });
+  };
+}
+function renderSavedLoopEditInputs(editButton, row, orderedFields, summaryFields, adapter, surfaceId, rowKey, setText, generatedElements, listeners, values, focusFirstInput) {
+  row.dataset.a2uiLoopEditing = "true";
+  for (const [index, field] of orderedFields.entries()) {
+    const fieldName = summaryFields[index];
+    const value = field.querySelector(
+      "[data-a2ui-loop-cell='value']"
+    );
+    if (fieldName === void 0 || value === null) {
+      continue;
+    }
+    let input = value.querySelector(
+      "input[data-a2ui-loop-edit-input='true']"
+    );
+    if (input === null) {
+      input = row.ownerDocument.createElement("input");
+      input.type = "text";
+      input.name = fieldName;
+      input.setAttribute("aria-label", displayFieldLabel(fieldName));
+      input.dataset.a2uiLoopEditInput = "true";
+      setText(value, "");
+      value.appendChild(input);
+      generatedElements.push(input);
+    }
+    input.value = stringEditValue(values[fieldName]);
+    const syncEditValue = () => {
+      adapter.updateListRowEdit(
+        surfaceId,
+        rowKey,
+        savedLoopRowInputValues(orderedFields, summaryFields)
+      );
+    };
+    input.addEventListener("input", syncEditValue);
+    input.addEventListener("change", syncEditValue);
+    listeners.push(() => {
+      input.removeEventListener("input", syncEditValue);
+      input.removeEventListener("change", syncEditValue);
+    });
+  }
+  setText(editButton, "Save");
+  if (focusFirstInput) {
+    row.querySelector(
+      "input[data-a2ui-loop-edit-input='true']"
+    )?.focus();
+  }
+}
+function savedLoopRowEditValues(orderedFields, summaryFields) {
+  const values = {};
+  orderedFields.forEach((field, index) => {
+    const fieldName = summaryFields[index];
+    const value = field.querySelector(
+      "[data-a2ui-loop-cell='value']"
+    );
+    if (fieldName !== void 0) {
+      values[fieldName] = value?.textContent?.trim() ?? "";
+    }
+  });
+  return values;
+}
+function savedLoopRowInputValues(orderedFields, summaryFields) {
+  const values = {};
+  orderedFields.forEach((field, index) => {
+    const fieldName = summaryFields[index];
+    const input = field.querySelector(
+      "input[data-a2ui-loop-edit-input='true']"
+    );
+    const value = field.querySelector(
+      "[data-a2ui-loop-cell='value']"
+    );
+    if (fieldName !== void 0) {
+      values[fieldName] = input?.value ?? value?.textContent?.trim() ?? "";
+    }
+  });
+  return values;
+}
+function savedLoopRowEditKey(rowIndex, summaryFields, values) {
+  return `${rowIndex}:${summaryFields.map((field) => `${field}=${stringEditValue(values[field])}`).join("|")}`;
+}
+function stringEditValue(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  return String(value);
+}
 function findSavedLoopField(fields, summaryField) {
   const expectedName = canonicalLoopFieldName(summaryField).toLowerCase();
   const expectedLabel = displayFieldLabel(expectedName).toLowerCase();