From a672fc76e4005b370664aac095adce93335a7875 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= <mathias.glaeser@beaufort.ch>
Date: Sat, 19 Sep 2026 12:39:05 +0200
Subject: [PATCH] Add shared editable action card pattern

---
 .../ui_foundation/editable-action-card.md     |  43 +++++++
 modules/shared/auth/ui/home.php               |  24 ++--
 public/scripts/shared-editable-action-card.js | 116 ++++++++++++++++++
 3 files changed, 172 insertions(+), 11 deletions(-)
 create mode 100644 docs/modules/shared/ui_foundation/editable-action-card.md
 create mode 100644 public/scripts/shared-editable-action-card.js

diff --git a/docs/modules/shared/ui_foundation/editable-action-card.md b/docs/modules/shared/ui_foundation/editable-action-card.md
new file mode 100644
index 0000000..4904db3
--- /dev/null
+++ b/docs/modules/shared/ui_foundation/editable-action-card.md
@@ -0,0 +1,43 @@
+# Editable Action Card
+
+## Zweck
+
+`Editable Action Card` ist ein fachlich neutrales UI-Pattern fuer Karten mit
+Titelaktionen, Lesemodus und optionalem Bearbeitungsmodus.
+
+Das Pattern kapselt nur die technische Interaktion:
+
+- Umschalten zwischen Lese- und Bearbeitungsansicht
+- Abbrechen einer Bearbeitung
+- optionale Loeschbestaetigung mit konfigurierbarem Token
+- Deaktivieren der Loeschaktion bis zur gueltigen Bestaetigung
+- gleichzeitiges Bearbeiten mehrerer Karten
+
+Fachliche Aktionen, API-Aufrufe, Validierung und die Aktualisierung fachlicher
+Daten bleiben beim owning Modul.
+
+## Markup-Vertrag
+
+Eine Karte wird mit `data-shared-editable-action-card` markiert. Die
+Bedienelemente verwenden folgende Attribute:
+
+- `data-shared-editable-card-edit`
+- `data-shared-editable-card-cancel`
+- `data-shared-editable-card-read`
+- `data-shared-editable-card-form`
+- optional `data-shared-editable-card-delete`
+- optional `data-shared-editable-card-delete-confirmation`
+- optional `data-shared-editable-card-delete-input`
+- optional `data-shared-editable-card-delete-submit`
+- optional `data-shared-editable-card-delete-cancel`
+
+Das Loesch-Token wird je Karte mit
+`data-shared-editable-delete-token` konfiguriert. Die Standardaktion fuer das
+Loeschen bleibt im owning Modul und verwendet den bestehenden fachlichen
+Handler.
+
+## Nutzung im Lager
+
+Im Lager-Drawer verwenden die aktive Charge und offene Chargen das Pattern.
+Rein lesende Karten, insbesondere historische und virtuelle Chargen, bleiben
+beim bestehenden Content-Card-Pattern.
diff --git a/modules/shared/auth/ui/home.php b/modules/shared/auth/ui/home.php
index b1cfbcf..66dc3af 100644
--- a/modules/shared/auth/ui/home.php
+++ b/modules/shared/auth/ui/home.php
@@ -476,9 +476,9 @@ function auth_render_lager_open_lots(array $lagerProducts, string $manufacturerO
                 && trim((string) ($lot['purchase_date'] ?? '')) !== ''
                 && (float) ($lot['qty_net'] ?? 0) > 0;
             $selectButton = '<button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-open-select data-lager-open-selectable="' . ($isQualified ? 'true' : 'false') . '"' . ($isQualified && empty($lot['next_active']) ? '' : ' disabled aria-disabled="true"') . '>Als nächste aktive auswählen</button>';
-            $html[] = '<div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host' . $selectedClass . '" data-pattern="overlay-card" data-dialog-open="false" data-lager-open-card-wrapper="' . $lotId . '"><article class="sg-card sg-card--content-card sg-delete-confirmation-pattern__target" data-component="content-card" data-pattern="overlay-card" aria-label="Offene Charge">'
-                . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen sg-object-card__header" data-component-part="card-header"><div class="sg-strong sg-text-on-dark">Offene Charge</div><div class="sg-component-row">' . $selectButton . '<button class="sg-interaction-element sg-button sg-button--warning" type="button" data-component="button" data-component-variant="warning" data-lager-open-delete>Löschen</button><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-open-edit-open>Bearbeiten</button></div></div>'
-                . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-lager-open-card="' . (int) ($lot['lot_id'] ?? 0) . '"><p class="sg-body"><strong>Auswahl:</strong> <span data-lager-open-card-next-active>' . auth_escape_html($selectedText) . '</span><br><strong>Naurua-Chargennummer:</strong> <span data-lager-open-card-lot-number>' . auth_escape_html((string) ($lot['lot_number'] ?? 'Nicht hinterlegt')) . '</span><br>'
+            $html[] = '<div class="sg-delete-confirmation-pattern__stage sg-delete-confirmation-pattern__host' . $selectedClass . '" data-pattern="overlay-card" data-dialog-open="false" data-lager-open-card-wrapper="' . $lotId . '"><article class="sg-card sg-card--content-card sg-delete-confirmation-pattern__target" data-component="content-card" data-pattern="overlay-card" data-shared-editable-action-card data-shared-editable-delete-token="DELETE" aria-label="Offene Charge">'
+                . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen sg-object-card__header" data-component-part="card-header"><div class="sg-strong sg-text-on-dark">Offene Charge</div><div class="sg-component-row">' . $selectButton . '<button class="sg-interaction-element sg-button sg-button--warning" type="button" data-component="button" data-component-variant="warning" data-lager-open-delete data-shared-editable-card-delete>Löschen</button><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-open-edit-open data-shared-editable-card-edit>Bearbeiten</button></div></div>'
+                . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-lager-open-card="' . (int) ($lot['lot_id'] ?? 0) . '" data-shared-editable-card-read><p class="sg-body"><strong>Auswahl:</strong> <span data-lager-open-card-next-active>' . auth_escape_html($selectedText) . '</span><br><strong>Naurua-Chargennummer:</strong> <span data-lager-open-card-lot-number>' . auth_escape_html((string) ($lot['lot_number'] ?? 'Nicht hinterlegt')) . '</span><br>'
                 . '<strong>Status:</strong> Vorbereitet<br>'
                 . '<strong>Bestand:</strong> <span data-lager-open-card-qty-net>' . auth_format_lager_quantity((float) ($lot['qty_net'] ?? 0)) . '</span><br>'
                 . '<strong>Eingangsmenge:</strong> <span data-lager-open-card-qty-in>' . auth_format_lager_quantity((float) ($lot['qty_in'] ?? 0)) . '</span><br>'
@@ -487,7 +487,7 @@ function auth_render_lager_open_lots(array $lagerProducts, string $manufacturerO
                 . '<strong>Herstellungsdatum:</strong> <span data-lager-open-card-mfg-date>' . auth_format_lager_date($lot['mfg_date'] ?? null) . '</span><br>'
                 . '<strong>MHD:</strong> <span data-lager-open-card-expiry-date>' . auth_format_lager_date($lot['expiry_date'] ?? null) . '</span><br>'
                 . '<strong>Einkaufsdatum:</strong> <span data-lager-open-card-purchase-date>' . auth_format_lager_date($lot['purchase_date'] ?? null) . '</span></p></div>'
-                . '<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-lager-open-edit-form hidden><div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Offene Charge bearbeiten"><form class="sg-form-sections-card" data-lager-open-edit-form-element><div class="sg-form-sections-card__body" data-pattern-part="form-body"><h2 class="sg-strong sg-form-sections-card__title">Offene Charge bearbeiten</h2>'
+                . '<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-lager-open-edit-form data-shared-editable-card-form hidden><div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Offene Charge bearbeiten"><form class="sg-form-sections-card" data-lager-open-edit-form-element><div class="sg-form-sections-card__body" data-pattern-part="form-body"><h2 class="sg-strong sg-form-sections-card__title">Offene Charge bearbeiten</h2>'
                 . '<section class="sg-form-sections-card__chapter" aria-labelledby="lager-open-charge-data-' . $lotId . '"><h2 id="lager-open-charge-data-' . $lotId . '" class="sg-strong sg-form-sections-card__chapter-title">Chargendaten</h2>'
                 . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Naurua-Chargennummer</span><input class="sg-interaction-element sg-input-single-line" type="text" data-lager-open-lot-number value="' . auth_escape_html((string) ($lot['lot_number'] ?? '')) . '"></label></div>'
                 . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Hersteller</span><select class="sg-interaction-element sg-input-single-line" data-lager-open-manufacturer>' . str_replace('value="' . (int) ($lot['manufacturer_party_id'] ?? 0) . '"', 'value="' . (int) ($lot['manufacturer_party_id'] ?? 0) . '" selected', $manufacturerOptions) . '</select></label></div>'
@@ -496,9 +496,9 @@ function auth_render_lager_open_lots(array $lagerProducts, string $manufacturerO
                 . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">MHD</span><input class="sg-interaction-element sg-input-single-line" type="date" data-lager-open-expiry-date value="' . auth_escape_html((string) ($lot['expiry_date'] ?? '')) . '"></label></div>'
                 . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Einkaufsdatum</span><input class="sg-interaction-element sg-input-single-line" type="date" data-lager-open-purchase-date value="' . auth_escape_html((string) ($lot['purchase_date'] ?? '')) . '"></label></div>'
                 . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Menge</span><input class="sg-interaction-element sg-input-single-line" type="number" min="0" step="1" inputmode="numeric" data-lager-open-target-qty value="' . auth_escape_html((string) ($lot['qty_net'] ?? 0)) . '"></label></div>'
-                . '</section><footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment"><div class="sg-form-sections-card__actions" data-pattern-part="form-actions"><button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button" data-lager-open-edit-close>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-form-sections-card__action" type="submit">Speichern</button></div></footer><p class="sg-body" data-lager-open-edit-status aria-live="polite"></p></div></form></div></div></article>'
+                . '</section><footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment"><div class="sg-form-sections-card__actions" data-pattern-part="form-actions"><button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button" data-lager-open-edit-close data-shared-editable-card-cancel>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-form-sections-card__action" type="submit">Speichern</button></div></footer><p class="sg-body" data-lager-open-edit-status aria-live="polite"></p></div></form></div></div></article>'
                 . '<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Leere Felder bestätigen" role="dialog" aria-modal="true" aria-labelledby="lager-open-confirmation-title-' . $lotId . '" data-lager-open-confirmation-card hidden><div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"><p class="sg-body sg-delete-confirmation-pattern__text" id="lager-open-confirmation-title-' . $lotId . '"><strong>Leere Felder speichern?</strong></p><p class="sg-body sg-delete-confirmation-pattern__text">Die folgenden Felder werden leer gespeichert:</p><div class="sg-delete-confirmation-pattern__list" data-lager-open-confirmation-empty-fields aria-label="Leer zu speichernde Felder"></div><div class="sg-delete-confirmation-pattern__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-open-confirmation-cancel>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process" type="button" data-lager-open-confirmation-submit>Speichern</button></div></div></article>'
-                . '<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="lager-open-delete-title-' . $lotId . '" data-overlay-dialog="delete" data-lager-open-delete-confirmation hidden><div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"><p class="sg-body sg-delete-confirmation-pattern__text" id="lager-open-delete-title-' . $lotId . '"><strong>Möchtest du diese offene Charge wirklich löschen?</strong></p><p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p><label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row"><span class="sg-label">Bestätigung</span><input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-lager-open-delete-confirmation-input></label><p class="sg-body" data-lager-open-delete-status aria-live="polite"></p><div class="sg-delete-confirmation-pattern__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-open-delete-confirmation-cancel>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-lager-open-delete-confirmation-submit>Löschen</button></div></div></article></div>';
+                . '<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Löschbestätigung" role="dialog" aria-modal="true" aria-labelledby="lager-open-delete-title-' . $lotId . '" data-overlay-dialog="delete" data-lager-open-delete-confirmation data-shared-editable-card-delete-confirmation hidden><div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body"><p class="sg-body sg-delete-confirmation-pattern__text" id="lager-open-delete-title-' . $lotId . '"><strong>Möchtest du diese offene Charge wirklich löschen?</strong></p><p class="sg-body sg-delete-confirmation-pattern__text">Du kannst das nicht rückgängig machen. Bestätige durch Eingabe von <span class="sg-delete-confirmation-pattern__code">DELETE</span>.</p><label class="sg-labeled-input-row sg-delete-confirmation-pattern__input-row"><span class="sg-label">Bestätigung</span><input class="sg-interaction-element sg-input-single-line sg-input-single-line--inactive-selectable sg-form-inactive-selectable" type="text" placeholder="DELETE" aria-label="Löschbestätigung durch DELETE" data-lager-open-delete-confirmation-input data-shared-editable-card-delete-input></label><p class="sg-body" data-lager-open-delete-status aria-live="polite"></p><div class="sg-delete-confirmation-pattern__actions"><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-open-delete-confirmation-cancel data-shared-editable-card-delete-cancel>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-lager-open-delete-confirmation-submit data-shared-editable-card-delete-submit>Löschen</button></div></div></article></div>';
         }
         $html[] = '</div></div>';
     }
@@ -566,10 +566,10 @@ function auth_render_lager_content(array $lagerProducts, array $lagerArtikel, ar
         . '</article>'
         . '<template data-lager-open-lot-template>' . $openLotCardTemplate . '</template>'
         . '<div data-lager-drawer-topic="open-lots" aria-label="Offene Chargen">' . auth_render_lager_open_lots($lagerProducts, $manufacturerOptions) . '</div>'
-        . '<article class="sg-card sg-card--content-card" data-component="content-card" data-lager-drawer-topic="lot" aria-label="Aktive Charge">'
-        . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen sg-object-card__header" data-component-part="card-header"><div class="sg-strong sg-text-on-dark">Aktive Charge</div><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-edit-open>Bearbeiten</button></div>'
-        . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-lager-read-view><p class="sg-body"><strong>Naurua-Chargennummer:</strong> <span data-lager-drawer-lot-number></span><br><strong>Aktueller Bestand:</strong> <span data-lager-drawer-current-qty></span><br><strong>Eingangsmenge:</strong> <span data-lager-drawer-qty-in></span><br><strong>Hersteller:</strong> <span data-lager-drawer-manufacturer-name></span><br><strong>Hersteller-Chargennummer:</strong> <span data-lager-drawer-manufacturer-lot-number></span><br><strong>Herstellungsdatum:</strong> <span data-lager-drawer-mfg-date></span><br><strong>MHD:</strong> <span data-lager-drawer-expiry-date></span><br><strong>Einkaufsdatum:</strong> <span data-lager-drawer-purchase-date></span></p></div>'
-        . '<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-lager-edit-form hidden><div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Aktive Charge bearbeiten">'
+        . '<article class="sg-card sg-card--content-card" data-component="content-card" data-lager-drawer-topic="lot" data-shared-editable-action-card aria-label="Aktive Charge">'
+        . '<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkgreen sg-object-card__header" data-component-part="card-header"><div class="sg-strong sg-text-on-dark">Aktive Charge</div><button class="sg-interaction-element sg-button sg-button--active" type="button" data-lager-edit-open data-shared-editable-card-edit>Bearbeiten</button></div>'
+        . '<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-lager-read-view data-shared-editable-card-read><p class="sg-body"><strong>Naurua-Chargennummer:</strong> <span data-lager-drawer-lot-number></span><br><strong>Aktueller Bestand:</strong> <span data-lager-drawer-current-qty></span><br><strong>Eingangsmenge:</strong> <span data-lager-drawer-qty-in></span><br><strong>Hersteller:</strong> <span data-lager-drawer-manufacturer-name></span><br><strong>Hersteller-Chargennummer:</strong> <span data-lager-drawer-manufacturer-lot-number></span><br><strong>Herstellungsdatum:</strong> <span data-lager-drawer-mfg-date></span><br><strong>MHD:</strong> <span data-lager-drawer-expiry-date></span><br><strong>Einkaufsdatum:</strong> <span data-lager-drawer-purchase-date></span></p></div>'
+        . '<div class="sg-card-segment sg-card-segment--body sg-card-segment--gray" data-lager-edit-form data-shared-editable-card-form hidden><div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Aktive Charge bearbeiten">'
         . '<form class="sg-form-sections-card" data-lager-edit-form-element><div class="sg-form-sections-card__body" data-pattern-part="form-body"><h2 class="sg-strong sg-form-sections-card__title">Aktive Charge bearbeiten</h2>'
         . '<section class="sg-form-sections-card__chapter" aria-labelledby="lager-charge-traceability-title"><h2 id="lager-charge-traceability-title" class="sg-strong sg-form-sections-card__chapter-title">Rückverfolgbarkeit</h2>'
         . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Naurua-Chargennummer</span><input class="sg-interaction-element sg-input-single-line sg-form-inactive-selectable" type="text" data-lager-lot-number readonly></label></div>'
@@ -583,7 +583,7 @@ function auth_render_lager_content(array $lagerProducts, array $lagerArtikel, ar
         . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Zugang buchen</span><input class="sg-interaction-element sg-input-single-line" type="number" min="0" step="0.01" inputmode="decimal" data-lager-receipt-qty placeholder="Menge"></label></div>'
         . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Bestandskorrektur (+ / −)</span><input class="sg-interaction-element sg-input-single-line" type="number" step="1" inputmode="numeric" data-lager-adjustment-qty placeholder="+ / − Menge"></label></div>'
         . '<div class="sg-form-sections-card__field-group"><label class="sg-labeled-input-row"><span class="sg-label">Abgang buchen</span><input class="sg-interaction-element sg-input-single-line" type="number" min="0" step="0.01" inputmode="decimal" data-lager-out-qty placeholder="Menge"></label></div>'
-        . '</section><footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment"><div class="sg-form-sections-card__actions" data-pattern-part="form-actions"><button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button" data-lager-edit-close>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-form-sections-card__action" type="submit">Speichern</button></div></footer><p class="sg-body" data-lager-edit-status aria-live="polite"></p></div></form>'
+        . '</section><footer class="sg-form-sections-card__actions-segment" data-pattern-part="form-actions-segment"><div class="sg-form-sections-card__actions" data-pattern-part="form-actions"><button class="sg-interaction-element sg-button sg-button--active sg-form-sections-card__action" type="button" data-lager-edit-close data-shared-editable-card-cancel>Abbrechen</button><button class="sg-interaction-element sg-button sg-button--process sg-form-sections-card__action" type="submit">Speichern</button></div></footer><p class="sg-body" data-lager-edit-status aria-live="polite"></p></div></form>'
         . '</div></div>'
         . '</article>'
         . '<div data-lager-drawer-topic="historical-lots" aria-label="Vergangene Chargen">' . auth_render_lager_historical_lots($lagerProducts) . '</div>'
@@ -823,6 +823,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo '</div>';
     echo '</section>';
     echo '<script src="/scripts/help-icon-overlays.js"></script>';
+    echo '<script src="/scripts/shared-editable-action-card.js"></script>';
     echo '<script>';
     echo 'const portalModuleNavigation = ' . $moduleNavigation . ';';
     echo 'const portalModuleContentCards = ' . $moduleContentCards . ';';
@@ -950,6 +951,7 @@ function render_auth_home_page(array $user, array $otcProducts = [], array $best
     echo "  if (lagerBindingsInstalled) { return; }";
     echo "  const contentRoot = document.querySelector('[data-left-navigation-content-body]');";
     echo "  if (!contentRoot || !contentRoot.querySelector('[data-lager-content]')) { return; }";
+    echo "  if (window.SharedEditableActionCard) { window.SharedEditableActionCard.init(contentRoot); }";
     echo "  lagerBindingsInstalled = true;";
     echo "  let lagerMobileDetailHost = null;";
     echo "  let lagerMobileDetailOpen = false;";
diff --git a/public/scripts/shared-editable-action-card.js b/public/scripts/shared-editable-action-card.js
new file mode 100644
index 0000000..b2d8ebb
--- /dev/null
+++ b/public/scripts/shared-editable-action-card.js
@@ -0,0 +1,116 @@
+(function () {
+  'use strict';
+
+  const cardSelector = '[data-shared-editable-action-card]';
+
+  const getCard = (element) => element.closest(cardSelector);
+
+  const setEditMode = (card, enabled) => {
+    if (!card) {
+      return;
+    }
+
+    const readView = card.querySelector('[data-shared-editable-card-read]');
+    const editView = card.querySelector('[data-shared-editable-card-form]');
+
+    if (readView) {
+      readView.hidden = enabled;
+    }
+    if (editView) {
+      editView.hidden = !enabled;
+    }
+  };
+
+  const resetDeleteConfirmation = (card) => {
+    const confirmation = card?.querySelector('[data-shared-editable-card-delete-confirmation]');
+    const input = card?.querySelector('[data-shared-editable-card-delete-input]');
+    const submit = card?.querySelector('[data-shared-editable-card-delete-submit]');
+
+    if (input) {
+      input.value = '';
+    }
+    if (submit) {
+      submit.disabled = true;
+      submit.setAttribute('aria-disabled', 'true');
+      submit.classList.add('sg-button--process-inactive');
+    }
+    if (confirmation) {
+      confirmation.hidden = true;
+    }
+    if (card) {
+      card.dataset.dialogOpen = 'false';
+    }
+  };
+
+  const openDeleteConfirmation = (card) => {
+    const confirmation = card?.querySelector('[data-shared-editable-card-delete-confirmation]');
+    const input = card?.querySelector('[data-shared-editable-card-delete-input]');
+
+    if (input) {
+      input.value = '';
+      input.focus();
+    }
+    if (confirmation) {
+      confirmation.hidden = false;
+    }
+    if (card) {
+      card.dataset.dialogOpen = 'true';
+    }
+  };
+
+  const updateDeleteButton = (input) => {
+    const card = getCard(input);
+    const submit = card?.querySelector('[data-shared-editable-card-delete-submit]');
+    const token = card?.dataset.sharedEditableDeleteToken || 'DELETE';
+    const valid = input.value === token;
+
+    if (submit) {
+      submit.disabled = !valid;
+      submit.setAttribute('aria-disabled', String(!valid));
+      submit.classList.toggle('sg-button--process-inactive', !valid);
+    }
+  };
+
+  const init = (root) => {
+    if (!root || root.dataset.sharedEditableActionCardsInitialized === 'true') {
+      return;
+    }
+
+    root.dataset.sharedEditableActionCardsInitialized = 'true';
+    root.addEventListener('click', (event) => {
+      const edit = event.target.closest('[data-shared-editable-card-edit]');
+      if (edit && root.contains(edit)) {
+        setEditMode(getCard(edit), true);
+        return;
+      }
+
+      const cancel = event.target.closest('[data-shared-editable-card-cancel]');
+      if (cancel && root.contains(cancel)) {
+        const card = getCard(cancel);
+        resetDeleteConfirmation(card);
+        setEditMode(card, false);
+        return;
+      }
+
+      const deleteButton = event.target.closest('[data-shared-editable-card-delete]');
+      if (deleteButton && root.contains(deleteButton)) {
+        openDeleteConfirmation(getCard(deleteButton));
+        return;
+      }
+
+      const deleteCancel = event.target.closest('[data-shared-editable-card-delete-cancel]');
+      if (deleteCancel && root.contains(deleteCancel)) {
+        resetDeleteConfirmation(getCard(deleteCancel));
+      }
+    });
+
+    root.addEventListener('input', (event) => {
+      const input = event.target.closest('[data-shared-editable-card-delete-input]');
+      if (input && root.contains(input)) {
+        updateDeleteButton(input);
+      }
+    });
+  };
+
+  window.SharedEditableActionCard = { init, resetDeleteConfirmation, setEditMode };
+}());