From abddc59f493747244363185fdd997f9eebd94afc Mon Sep 17 00:00:00 2001
From: Jon Kazama <kontakt@hellion-media.de>
Date: Sat, 13 Jun 2026 20:31:33 +0200
Subject: [PATCH] feat(dialog): Custom-Dialoge mit View-Transition-Fade,
 Teardown in Closure

---
 src/js/dialog.js | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/js/dialog.js b/src/js/dialog.js
index f0e9e0a..272e12f 100644
--- a/src/js/dialog.js
+++ b/src/js/dialog.js
@@ -3,6 +3,20 @@
    Custom Dialog System (ersetzt native alert/confirm)
    ============================================= */
 
+/**
+ * Fuehrt eine DOM-Mutation mit nativem View-Transition-Fade aus.
+ * Feature-Detection-Fallback (Firefox < 144): instant.
+ * reduced-motion kappt das Fade ueber den ungeschichteten @media-Block.
+ * @param {Function} mutate - synchrone DOM-Mutation
+ */
+function dialogViewTransition(mutate) {
+  if (document.startViewTransition) {
+    document.startViewTransition(mutate);
+  } else {
+    mutate();
+  }
+}
+
 const HellionDialog = {
   /** SVG-Icons je nach Dialog-Typ */
   _icons: {
@@ -64,9 +78,11 @@ const HellionDialog = {
       actions.className = 'dialog-actions';
 
       function cleanup(result) {
-        overlay.classList.remove('active');
         document.removeEventListener('keydown', keyHandler);
-        setTimeout(() => overlay.remove(), 200);
+        dialogViewTransition(() => {
+          overlay.classList.remove('active');
+          overlay.remove();
+        });
         resolve(result);
       }
 
@@ -108,8 +124,8 @@ const HellionDialog = {
       document.addEventListener('keydown', keyHandler);
 
       document.body.appendChild(overlay);
-      // Nächster Frame für CSS-Transition
-      requestAnimationFrame(() => {
+      // View-Transition uebernimmt das Fade; Fokus bleibt erhalten
+      dialogViewTransition(() => {
         overlay.classList.add('active');
         confirmBtn.focus();
       });