react-dockable-desktop 5.1.3 → 5.2.0

package/dist/styles.css

@@ -27,6 +27,18 @@
   --rdd-window-text: #f8f9fa;
   --rdd-window-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
   --rdd-window-shadow-focused: 0 24px 50px rgba(0, 0, 0, 0.55);
+  /* Modal theme variables */
+  --rdd-modal-curtain-bg: rgba(9, 11, 17, 0.65);
+  --rdd-modal-bg: rgba(20, 23, 34, 0.95);
+  --rdd-modal-border: rgba(255, 255, 255, 0.08);
+  --rdd-modal-header-bg: rgba(0, 0, 0, 0.15);
+  --rdd-modal-header-border: rgba(255, 255, 255, 0.06);
+  --rdd-modal-close-hover-color: #ffffff;
+  --rdd-side-panel-bg: rgba(20, 23, 34, 0.88);
+  --rdd-side-panel-border: rgba(255, 255, 255, 0.08);
+  --rdd-side-panel-header-bg: rgba(0, 0, 0, 0.15);
+  --rdd-side-panel-header-border: rgba(255, 255, 255, 0.06);
+  --rdd-side-panel-close-hover-color: #ffffff;
   /* Grid/Docked panel theme variables */
   --rdd-border-panel: rgba(255, 255, 255, 0.08);
   --rdd-bg-tab-inactive: #0c0d12;
@@ -1075,6 +1087,19 @@ body.rdd-dragging-active {
   --rdd-window-text: #212529;
   --rdd-window-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
   --rdd-window-shadow-focused: 0 16px 36px rgba(0, 0, 0, 0.12);
+  /* Light skin modal overrides */
+  --rdd-modal-curtain-bg: rgba(0, 0, 0, 0.5);
+  --rdd-modal-bg: rgba(255, 255, 255, 0.97);
+  --rdd-modal-border: rgba(0, 0, 0, 0.1);
+  --rdd-modal-header-bg: rgba(0, 0, 0, 0.04);
+  --rdd-modal-header-border: rgba(0, 0, 0, 0.08);
+  --rdd-modal-close-hover-color: #212529;
+  /* Light skin side panel overrides */
+  --rdd-side-panel-bg: rgba(255, 255, 255, 0.97);
+  --rdd-side-panel-border: rgba(0, 0, 0, 0.1);
+  --rdd-side-panel-header-bg: rgba(0, 0, 0, 0.04);
+  --rdd-side-panel-header-border: rgba(0, 0, 0, 0.08);
+  --rdd-side-panel-close-hover-color: #212529;
   /* Light skin grid/docked panel overrides */
   --rdd-border-panel: rgba(0, 0, 0, 0.08);
   --rdd-bg-tab-inactive: #e9ecef;
@@ -1854,13 +1879,38 @@ body.rdd-dragging-active {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 38px; /* Perfectly aligned to match the 38px height of the drawer header bar */
+  padding-top: 38px; /* Perfectly aligned to match the 38px height of the drawer header bar — only
+                         relevant when a tab is the first item; see the modifier rule below. */
   padding-bottom: 12px;
-  gap: 8px;
   flex-shrink: 0;
   z-index: 5;
 }
 
+/* When a headerAction is present, it owns its own top/bottom spacing (see
+   .rdd-sidebar-header-area below) — the strip's own alignment padding no longer applies. */
+.rdd-sidebar-tabs-strip.rdd-sidebar-tabs-strip--has-header-action {
+  padding-top: 0;
+}
+
+/* Wraps `headerAction` — independent of .rdd-sidebar-tabs-list's own gap, so a consumer can
+   tune spacing/effective height around their button (default or fully custom-rendered) without
+   touching inter-tab spacing. Layout-only values, so no light/dark variant is needed. */
+.rdd-sidebar-header-area {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-top: var(--rdd-sidebar-header-area-padding-top, 8px);
+  padding-bottom: var(--rdd-sidebar-header-area-padding-bottom, 8px);
+}
+
+/* Wraps the tabs only — owns the gap that used to live on .rdd-sidebar-tabs-strip itself. */
+.rdd-sidebar-tabs-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+}
+
 /* Position-specific tab strip border alignment */
 .rdd-sidebar-tabs-strip.rdd-left {
   border-right: 1px solid var(--sidebar-border) !important;
@@ -2039,14 +2089,14 @@ html.rdd-no-animations [class*="rdd-"]::after {
 .rdd-modal-curtain {
   position: absolute;
   inset: 0;
-  background-color: rgba(9, 11, 17, 0.65);
+  background-color: var(--rdd-modal-curtain-bg);
   backdrop-filter: blur(6px);
 }
 
 .rdd-modal-window {
   position: relative;
-  background: rgba(20, 23, 34, 0.95);
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--rdd-modal-bg);
+  border: 1px solid var(--rdd-modal-border);
   box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
   border-radius: 12px;
   display: flex;
@@ -2062,8 +2112,8 @@ html.rdd-no-animations [class*="rdd-"]::after {
   display: flex;
   align-items: center;
   padding: 12px 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  background-color: rgba(0, 0, 0, 0.15);
+  border-bottom: 1px solid var(--rdd-modal-header-border);
+  background-color: var(--rdd-modal-header-bg);
 }
 
 .rdd-modal-icon {
@@ -2095,7 +2145,7 @@ html.rdd-no-animations [class*="rdd-"]::after {
 
 .rdd-modal-close-button:hover {
   background-color: rgba(255, 255, 255, 0.08);
-  color: #fff;
+  color: var(--rdd-modal-close-hover-color);
 }
 
 .rdd-modal-body {
@@ -2129,10 +2179,10 @@ html.rdd-no-animations [class*="rdd-"]::after {
   top: 0;
   bottom: 0;
   width: 400px;
-  background: rgba(20, 23, 34, 0.88);
+  background: var(--rdd-side-panel-bg);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
-  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  border-right: 1px solid var(--rdd-side-panel-border);
   z-index: calc(var(--rdd-z-base, 1000) + 8000);
   box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4);
   transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
@@ -2143,7 +2193,7 @@ html.rdd-no-animations [class*="rdd-"]::after {
 .rdd-side-panel-right {
   right: 0;
   border-right: none;
-  border-left: 1px solid rgba(255, 255, 255, 0.08);
+  border-left: 1px solid var(--rdd-side-panel-border);
   box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
 }
 
@@ -2162,8 +2212,8 @@ html.rdd-no-animations [class*="rdd-"]::after {
   display: flex;
   align-items: center;
   padding: 12px 20px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
-  background-color: rgba(0, 0, 0, 0.15);
+  border-bottom: 1px solid var(--rdd-side-panel-header-border);
+  background-color: var(--rdd-side-panel-header-bg);
   min-height: 44px;
 }
 
@@ -2197,7 +2247,7 @@ html.rdd-no-animations [class*="rdd-"]::after {
 
 .rdd-side-panel-close-button:hover {
   background-color: rgba(255, 255, 255, 0.08);
-  color: #fff;
+  color: var(--rdd-side-panel-close-hover-color);
 }
 
 .rdd-side-panel-body {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dockable-desktop",
-  "version": "5.1.3",
+  "version": "5.2.0",
   "description": "A premium, state-of-the-art window manager and dockable layout engine for React. Supports fluid grid splits, tabbed groups, floating resizable windows, zero-unmount state preservation, context menus, and internationalization.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",