From 26de5ec58fc4faa33c858fd9762a9d976160789d Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 21:57:34 +0100
Subject: [PATCH] feat: add click-to-close backdrop behind DetailPanel

Adds a subtle semi-transparent backdrop (rgba(0,0,0,0.15)) behind the
overlay panel. Clicking the backdrop closes the panel. Fades in with
the panel animation.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../DetailPanel/DetailPanel.module.css        | 13 +++
 .../composites/DetailPanel/DetailPanel.tsx    | 81 ++++++++++---------
 2 files changed, 55 insertions(+), 39 deletions(-)

diff --git a/src/design-system/composites/DetailPanel/DetailPanel.module.css b/src/design-system/composites/DetailPanel/DetailPanel.module.css
index 96480b1..ebc16cd 100644
--- a/src/design-system/composites/DetailPanel/DetailPanel.module.css
+++ b/src/design-system/composites/DetailPanel/DetailPanel.module.css
@@ -1,3 +1,16 @@
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.15);
+  z-index: 99;
+  animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
 .panel {
   position: fixed;
   top: 0;
diff --git a/src/design-system/composites/DetailPanel/DetailPanel.tsx b/src/design-system/composites/DetailPanel/DetailPanel.tsx
index e5dfe04..5363064 100644
--- a/src/design-system/composites/DetailPanel/DetailPanel.tsx
+++ b/src/design-system/composites/DetailPanel/DetailPanel.tsx
@@ -23,51 +23,54 @@ export function DetailPanel({ open, onClose, title, tabs, children, actions, cla
 
   const activeContent = tabs?.find((t) => t.value === activeTab)?.content
 
-  const panel = (
-    <aside
-      className={`${styles.panel} ${open ? styles.open : ''} ${className ?? ''}`}
-      aria-hidden={!open}
-    >
-      <div className={styles.header}>
-        <span className={styles.title}>{title}</span>
-        <button
-          className={styles.closeBtn}
-          onClick={onClose}
-          aria-label="Close panel"
-          type="button"
-        >
-          &times;
-        </button>
-      </div>
-
-      {tabs && tabs.length > 0 && (
-        <div className={styles.tabs}>
-          {tabs.map((tab) => (
-            <button
-              key={tab.value}
-              className={`${styles.tab} ${tab.value === activeTab ? styles.activeTab : ''}`}
-              onClick={() => setActiveTab(tab.value)}
-              type="button"
-            >
-              {tab.label}
-            </button>
-          ))}
+  const content = (
+    <>
+      {open && <div className={styles.backdrop} onClick={onClose} aria-hidden="true" />}
+      <aside
+        className={`${styles.panel} ${open ? styles.open : ''} ${className ?? ''}`}
+        aria-hidden={!open}
+      >
+        <div className={styles.header}>
+          <span className={styles.title}>{title}</span>
+          <button
+            className={styles.closeBtn}
+            onClick={onClose}
+            aria-label="Close panel"
+            type="button"
+          >
+            &times;
+          </button>
         </div>
-      )}
 
-      <div className={styles.body}>
-        {children ?? activeContent}
-      </div>
+        {tabs && tabs.length > 0 && (
+          <div className={styles.tabs}>
+            {tabs.map((tab) => (
+              <button
+                key={tab.value}
+                className={`${styles.tab} ${tab.value === activeTab ? styles.activeTab : ''}`}
+                onClick={() => setActiveTab(tab.value)}
+                type="button"
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        )}
 
-      {actions && (
-        <div className={styles.actions}>
-          {actions}
+        <div className={styles.body}>
+          {children ?? activeContent}
         </div>
-      )}
-    </aside>
+
+        {actions && (
+          <div className={styles.actions}>
+            {actions}
+          </div>
+        )}
+      </aside>
+    </>
   )
 
   // Portal to AppShell level if target exists, otherwise render in place
   const portalTarget = document.getElementById('cameleer-detail-panel-root')
-  return portalTarget ? createPortal(panel, portalTarget) : panel
+  return portalTarget ? createPortal(content, portalTarget) : content
 }