react-dockable-desktop 5.3.5 → 6.0.0

package/dist/styles.css

@@ -103,6 +103,27 @@
   --rdd-panel-float-title-color-active: var(--rdd-window-text, #f8f9fa);
 }
 
+/* Every element the library renders carries an rdd- prefixed class (see
+   CLAUDE.md's prefix convention) — this targets exactly those elements
+   directly, never their descendants, so a consumer's own content nested
+   inside (tab renderContent, panel/modal body content) is never touched.
+   Without this, several rules combining padding with a fixed/percentage
+   min-height/max-height/height (e.g. .rdd-side-panel-header,
+   .rdd-toolbar-strip) render at a size that depends on whatever box-sizing
+   the host page happens to set globally — MUI's CssBaseline and Bootstrap's
+   reboot both reset it via a bare `*` selector, but a plain page with no
+   such reset leaves the browser default (content-box) in effect, so the
+   exact same CSS renders at a visibly different size purely depending on
+   which app it's dropped into. Deliberately no !important: this selector's
+   specificity (0,1,0) already beats an accidental bare `*` reset (both
+   examples above are (0,0,0)) unconditionally, regardless of stylesheet
+   load order, while still losing — via source order at the resulting tie —
+   to a consumer's own deliberate, equally-specific override of a specific
+   rdd- class, which normally loads after this stylesheet. */
+[class*="rdd-"] {
+  box-sizing: border-box;
+}
+
 /* Sizing only — margin/overflow/height/width, no cosmetic properties. This is a
    structural requirement, not a style choice: `.full-viewport-layout` and every
    percentage-height element the workspace nests inside (including WindowManager's
@@ -636,25 +657,34 @@ body.rdd-resizing-col-active * {
 }
 
 /* Cross-browser scrollbar styling (Firefox standard) — scoped to the library's
-   own workspace subtree, never the consumer's page. */
-.rdd-workspace * {
+   own workspace subtree, never the consumer's page. .rdd-sidebar-drawer-body is
+   included explicitly alongside it: <Sidebar> mounts as a sibling of
+   <WindowManager>, not a descendant of .rdd-workspace, so it needs its own
+   entry here to pick up the same treatment — keep both in sync if this block
+   ever changes. */
+.rdd-workspace *,
+.rdd-sidebar-drawer-body {
   scrollbar-width: thin;
   scrollbar-color: var(--rdd-scrollbar-thumb) var(--rdd-scrollbar-track);
 }
 
 /* WebKit (Chrome, Safari, Edge) scrollbar styling */
-.rdd-workspace ::-webkit-scrollbar {
+.rdd-workspace ::-webkit-scrollbar,
+.rdd-sidebar-drawer-body::-webkit-scrollbar {
   width: 6px;
   height: 6px;
 }
-.rdd-workspace ::-webkit-scrollbar-track {
+.rdd-workspace ::-webkit-scrollbar-track,
+.rdd-sidebar-drawer-body::-webkit-scrollbar-track {
   background: var(--rdd-scrollbar-track);
 }
-.rdd-workspace ::-webkit-scrollbar-thumb {
+.rdd-workspace ::-webkit-scrollbar-thumb,
+.rdd-sidebar-drawer-body::-webkit-scrollbar-thumb {
   background: var(--rdd-scrollbar-thumb);
   border-radius: 4px;
 }
-.rdd-workspace ::-webkit-scrollbar-thumb:hover {
+.rdd-workspace ::-webkit-scrollbar-thumb:hover,
+.rdd-sidebar-drawer-body::-webkit-scrollbar-thumb:hover {
   background: var(--rdd-scrollbar-thumb-hover);
 }
 
@@ -1857,11 +1887,6 @@ body.rdd-dragging-active {
   height: 100%;
 }
 
-/* Suppress all drawer transitions during pointer-drag resize */
-.rdd-sidebar-resizing .rdd-sidebar-content-drawer {
-  transition: none !important;
-}
-
 /* Position-specific drawer border and shadow alignment */
 .rdd-sidebar-content-drawer.rdd-left {
   border-right: 1px solid var(--sidebar-border) !important;
@@ -2177,7 +2202,7 @@ html.rdd-no-animations [class*="rdd-"]::after {
 }
 
 .rdd-modal-body {
-  padding: 10px;
+  padding: 0;
   overflow-y: auto;
   max-height: calc(90vh - 70px);
 }
@@ -2295,7 +2320,7 @@ html.rdd-no-animations [class*="rdd-"]::after {
 .rdd-side-panel-body {
   flex-grow: 1;
   overflow-y: auto;
-  padding: 10px;
+  padding: 0;
 }
 
 .rdd-side-panel-left.rdd-side-panel-visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dockable-desktop",
-  "version": "5.3.5",
+  "version": "6.0.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",
@@ -34,6 +34,7 @@
     "dev": "vite demo",
     "dev:ria": "vite demo-luciadria --host",
     "dev:oldria": "vite demo-oldria --host",
+    "dev:sidebar": "vite demo-sidebar --host",
     "build": "tsup && node -e \"require('fs').copyFileSync('src/index.css', 'dist/styles.css')\"",
     "demo:build": "vite build --base /react-dockable-desktop/demo/",
     "docs:dev": "vitepress dev docs-site",