@keenmate/pure-admin-core 1.1.3 → 1.2.0

package/README.md

@@ -77,6 +77,7 @@ The `snippets/` directory contains clean HTML patterns for all components:
 - `utilities.html` - Utility classes
 - `virtual-scroll.html` - Virtual scrolling
 - `web-daterangepicker.html` - Date range picker web component
+- `detail-panel.html` - Detail panel (inline, overlay, full-screen)
 - `web-multiselect.html` - Multiselect web component
 
 These snippets are the canonical reference for building framework components in any frontend framework (React, Vue, Svelte, etc.).
@@ -310,6 +311,26 @@ This enables dark mode support for web components like `@keenmate/web-grid` that
 - `.pa-notifications__time` - Timestamp
 - `.pa-notifications__footer` - Panel footer with "View all" link
 
+### Detail Panel
+- `.pa-detail-view` - Flex wrapper for inline split-view (table + panel side by side)
+- `.pa-detail-view__main` - Left side (table area), `flex: 1`
+- `.pa-detail-view__panel` - Right side panel, hidden by default (`width: 0`)
+- `.pa-detail-view__panel--open` - Shows panel with configured width
+- `.pa-detail-view--overlay` - Card overlay modifier (panel overlays table within card)
+- `.pa-detail-view__overlay` - Backdrop element (click to close), use `--visible` to show
+- `.pa-detail-panel--overlay` - Full-screen overlay mode (fixed position, like profile panel)
+- `.pa-detail-panel--open` - Makes overlay panel visible with slide-in transition
+- `.pa-detail-panel__content` - Panel content wrapper (flex column: header/body/footer)
+- `.pa-detail-panel__header` - Panel header with title, optional action buttons, close button
+- `.pa-detail-panel__title` - Truncated panel title
+- `.pa-detail-panel__close` - Close button
+- `.pa-detail-panel__tabs` - Optional tab navigation (between header and body)
+- `.pa-detail-panel__body` - Scrollable body area
+- `.pa-detail-panel__footer` - Fixed footer with action buttons
+- `.pa-detail-panel__overlay` - Backdrop (overlay mode, click to close)
+- `.pa-detail-panel-resize` - Drag handle on left edge for resizing
+- `.is-selected` - Applied to `<tr>` to highlight selected row
+
 ### Profile Panel
 - `.pa-profile-panel` - Slide-in profile panel
 - `.pa-profile-panel--open` - Open state

package/dist/css/main.css

@@ -13301,6 +13301,269 @@ code {
   padding: 0.4rem 0.8rem;
 }
 
+/* ========================================
+   Detail Panel Components
+   Inline split-view and overlay detail panels
+   ======================================== */
+:root {
+  --pa-local-detail-panel-width: 40rem;
+  --pa-local-detail-panel-max-width: 64rem;
+}
+
+:where(.pa-detail-view__panel) {
+  width: var(--pa-local-detail-panel-width);
+  max-width: var(--pa-local-detail-panel-max-width);
+}
+
+.pa-detail-view {
+  display: flex;
+  gap: 0;
+  width: 100%;
+}
+.pa-detail-view__main {
+  flex: 1;
+  min-width: 0;
+  overflow: auto;
+}
+.pa-detail-view__panel {
+  width: 0;
+  min-width: 0;
+  overflow: hidden;
+  flex-shrink: 0;
+  border-left: 0 solid var(--pa-border-color);
+}
+.pa-detail-view__panel--open {
+  width: var(--pa-local-detail-panel-width);
+  min-width: 28rem;
+  max-width: var(--pa-local-detail-panel-max-width);
+  border-left-width: 1px;
+  overflow: visible;
+}
+
+.pa-detail-view--overlay {
+  position: relative;
+  overflow: hidden;
+}
+.pa-detail-view--overlay .pa-detail-view__panel {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  z-index: 2;
+}
+
+.pa-detail-view__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--pa-detail-panel-overlay-bg);
+  z-index: 1;
+  opacity: 0;
+  visibility: hidden;
+  cursor: pointer;
+}
+.pa-detail-view__overlay--visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.pa-detail-panel--overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  z-index: 4500;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+}
+.pa-detail-panel--overlay.pa-detail-panel--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: all;
+}
+.pa-detail-panel--overlay.pa-detail-panel--open .pa-detail-panel__content {
+  transform: translateX(0);
+}
+
+.pa-detail-panel__content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--pa-card-bg);
+  position: relative;
+}
+.pa-detail-panel--overlay .pa-detail-panel__content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  width: var(--pa-local-detail-panel-width);
+  max-width: var(--pa-local-detail-panel-max-width);
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+  transform: translateX(100%);
+}
+
+.pa-detail-panel__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--pa-detail-panel-overlay-bg);
+  cursor: pointer;
+}
+
+.pa-detail-panel__header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  padding: 1.2rem 1.6rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+  min-height: 0;
+}
+
+.pa-detail-panel__title {
+  flex: 1;
+  margin: 0;
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: var(--pa-text-color-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pa-detail-panel__close {
+  width: 3.2rem;
+  height: 3.2rem;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pa-text-color-2);
+  border-radius: 4px;
+}
+.pa-detail-panel__close:hover {
+  background-color: var(--pa-accent-light);
+  color: var(--pa-accent);
+}
+.pa-detail-panel__close:focus {
+  outline: 2px solid var(--pa-accent);
+  outline-offset: 2px;
+}
+
+.pa-detail-panel__tabs {
+  flex-shrink: 0;
+  padding: 0 1.6rem;
+  border-bottom: 1px solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+}
+.pa-detail-panel__tabs .pa-tabs__item {
+  color: var(--pa-text-color-2);
+  border-bottom-color: transparent;
+}
+.pa-detail-panel__tabs .pa-tabs__item:hover {
+  color: var(--pa-text-color-1);
+  background-color: var(--pa-accent-light);
+}
+.pa-detail-panel__tabs .pa-tabs__item--active {
+  color: var(--pa-text-color-1);
+  border-bottom-color: var(--pa-accent);
+}
+
+.pa-detail-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.2rem 1.6rem;
+}
+
+.pa-detail-panel__footer {
+  flex-shrink: 0;
+  padding: 1.2rem 1.6rem;
+  border-top: 1px solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+}
+
+.pa-detail-panel-resize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 1;
+}
+.pa-detail-panel-resize:hover, .pa-detail-panel-resize--active {
+  background-color: var(--pa-accent);
+  opacity: 0.3;
+}
+
+.pa-detail-panel-resizing {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+.pa-table tbody tr.is-selected {
+  background-color: var(--pa-detail-panel-selected-bg);
+}
+.pa-table tbody tr.is-selected:hover {
+  background-color: var(--pa-detail-panel-selected-bg);
+}
+
+@media (max-width: 768px) {
+  .pa-detail-view__panel {
+    display: none;
+  }
+  .pa-detail-panel--mobile-overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    z-index: 4500;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+  }
+  .pa-detail-panel--mobile-overlay.pa-detail-panel--open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: all;
+  }
+  .pa-detail-panel--mobile-overlay.pa-detail-panel--open .pa-detail-panel__content {
+    transform: translateX(0);
+  }
+  .pa-detail-panel--mobile-overlay .pa-detail-panel__content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: 90vw;
+    max-width: none;
+    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+    transform: translateX(100%);
+  }
+  .pa-detail-panel--mobile-overlay .pa-detail-panel__overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--pa-detail-panel-overlay-bg);
+    cursor: pointer;
+  }
+}
 /* ========================================
    Settings Panel Component
    Floating panel for global settings management

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/snippets/detail-panel.html

@@ -0,0 +1,138 @@
+<!-- =============================================
+     Detail Panel - Inline Split-View Mode
+     ============================================= -->
+
+<!-- Inline split-view: table + side panel -->
+<div class="pa-detail-view">
+    <!-- Left side: table -->
+    <div class="pa-detail-view__main">
+        <table class="pa-table pa-table--hover pa-table--striped">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Email</th>
+                    <th>Role</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="is-selected" onclick="openInlinePanel(1)">
+                    <td>John Doe</td>
+                    <td>john@example.com</td>
+                    <td>Admin</td>
+                </tr>
+                <tr onclick="openInlinePanel(2)">
+                    <td>Jane Smith</td>
+                    <td>jane@example.com</td>
+                    <td>Editor</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Right side: detail panel -->
+    <div class="pa-detail-view__panel pa-detail-view__panel--open">
+        <div class="pa-detail-panel__content">
+            <div class="pa-detail-panel-resize"></div>
+            <div class="pa-detail-panel__header">
+                <h4 class="pa-detail-panel__title">User Details</h4>
+                <button class="pa-detail-panel__close" onclick="closeInlinePanel()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="pa-detail-panel__body">
+                <p>Detail content goes here...</p>
+            </div>
+            <div class="pa-detail-panel__footer">
+                <button class="pa-btn pa-btn--primary pa-btn--sm">Edit</button>
+                <button class="pa-btn pa-btn--secondary pa-btn--sm">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- =============================================
+     Detail Panel - Card Overlay Mode
+     ============================================= -->
+
+<!-- Card overlay: panel floats over the table within the card -->
+<div class="pa-detail-view pa-detail-view--overlay">
+    <!-- Backdrop (click to close) -->
+    <div class="pa-detail-view__overlay" onclick="closeCardOverlayPanel()"></div>
+
+    <!-- Table (stays full width) -->
+    <div class="pa-detail-view__main">
+        <table class="pa-table pa-table--hover pa-table--striped">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Email</th>
+                    <th>Role</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr class="is-selected" onclick="openCardOverlayPanel(1)">
+                    <td>John Doe</td>
+                    <td>john@example.com</td>
+                    <td>Admin</td>
+                </tr>
+                <tr onclick="openCardOverlayPanel(2)">
+                    <td>Jane Smith</td>
+                    <td>jane@example.com</td>
+                    <td>Editor</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <!-- Detail panel (overlays the table) -->
+    <div class="pa-detail-view__panel pa-detail-view__panel--open">
+        <div class="pa-detail-panel__content">
+            <div class="pa-detail-panel-resize"></div>
+            <div class="pa-detail-panel__header">
+                <h4 class="pa-detail-panel__title">User Details</h4>
+                <button class="pa-detail-panel__close" onclick="closeCardOverlayPanel()">
+                    <i class="fas fa-times"></i>
+                </button>
+            </div>
+            <div class="pa-detail-panel__body">
+                <p>Detail content goes here...</p>
+            </div>
+            <div class="pa-detail-panel__footer">
+                <button class="pa-btn pa-btn--primary pa-btn--sm">Edit</button>
+                <button class="pa-btn pa-btn--secondary pa-btn--sm">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+
+<!-- =============================================
+     Detail Panel - Overlay Mode
+     ============================================= -->
+
+<!-- Trigger button (typically a table row click) -->
+<button class="pa-btn pa-btn--primary" onclick="openOverlayPanel(1)">
+    Open Detail Panel
+</button>
+
+<!-- Overlay panel (fixed position, like profile panel) -->
+<div class="pa-detail-panel--overlay" id="detailPanelOverlay">
+    <div class="pa-detail-panel__overlay" onclick="closeOverlayPanel()"></div>
+    <div class="pa-detail-panel__content">
+        <div class="pa-detail-panel-resize"></div>
+        <div class="pa-detail-panel__header">
+            <h4 class="pa-detail-panel__title">User Details</h4>
+            <button class="pa-detail-panel__close" onclick="closeOverlayPanel()">
+                <i class="fas fa-times"></i>
+            </button>
+        </div>
+        <div class="pa-detail-panel__body">
+            <p>Detail content goes here...</p>
+        </div>
+        <div class="pa-detail-panel__footer">
+            <button class="pa-btn pa-btn--primary pa-btn--sm">Edit</button>
+            <button class="pa-btn pa-btn--secondary pa-btn--sm">Delete</button>
+        </div>
+    </div>
+</div>

package/src/scss/_base-css-variables.scss

@@ -443,6 +443,12 @@
   // =========================================================================
   --pa-profile-overlay-bg: #{$profile-overlay-bg};
 
+  // =========================================================================
+  // DETAIL PANEL COLORS
+  // =========================================================================
+  --pa-detail-panel-overlay-bg: #{$detail-panel-overlay-bg};
+  --pa-detail-panel-selected-bg: #{$detail-panel-selected-bg};
+
   // =========================================================================
   // COMMAND PALETTE COLORS
   // =========================================================================

package/src/scss/_core.scss

@@ -98,6 +98,9 @@
 // Popconfirm (anchored confirmation dialogs)
 @use 'core-components/popconfirm' as *;
 
+// Detail Panel
+@use 'core-components/detail-panel' as *;
+
 // Settings Panel
 @use 'core-components/settings-panel' as *;
 

package/src/scss/core-components/_detail-panel.scss

@@ -0,0 +1,335 @@
+/* ========================================
+   Detail Panel Components
+   Inline split-view and overlay detail panels
+   ======================================== */
+@use '../variables' as *;
+
+// Local CSS variables for detail panel (runtime state, modified by JS for resize)
+:root {
+  --pa-local-detail-panel-width: #{$detail-panel-width};
+  --pa-local-detail-panel-max-width: #{$detail-panel-max-width};
+}
+
+// Detail panel content width - :where() for low specificity (utility classes can override)
+:where(.pa-detail-view__panel) {
+  width: var(--pa-local-detail-panel-width);
+  max-width: var(--pa-local-detail-panel-max-width);
+}
+
+// ============================================================================
+// INLINE SPLIT-VIEW MODE
+// .pa-detail-view wraps a table (left) + panel (right)
+// ============================================================================
+
+.pa-detail-view {
+  display: flex;
+  gap: 0;
+  width: 100%;
+
+  // Left side: table/content area
+  &__main {
+    flex: 1;
+    min-width: 0;
+    overflow: auto;
+  }
+
+  // Right side: detail panel (hidden by default)
+  &__panel {
+    width: 0;
+    min-width: 0;
+    overflow: hidden;
+    flex-shrink: 0;
+    border-left: 0 solid var(--pa-border-color);
+
+    // Open state: show panel with configured width
+    &--open {
+      width: var(--pa-local-detail-panel-width);
+      min-width: $detail-panel-min-width;
+      max-width: var(--pa-local-detail-panel-max-width);
+      border-left-width: $border-width-base;
+      overflow: visible;
+    }
+  }
+}
+
+// ============================================================================
+// CARD OVERLAY MODE
+// .pa-detail-view--overlay: panel overlays the table within the card
+// ============================================================================
+
+.pa-detail-view--overlay {
+  position: relative;
+  overflow: hidden;
+
+  .pa-detail-view__panel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    z-index: 2;
+  }
+}
+
+// Backdrop for card overlay mode
+.pa-detail-view__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--pa-detail-panel-overlay-bg);
+  z-index: 1;
+  opacity: 0;
+  visibility: hidden;
+  cursor: pointer;
+
+  &--visible {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+// ============================================================================
+// OVERLAY MODE
+// .pa-detail-panel--overlay is a fixed overlay (like profile panel)
+// ============================================================================
+
+.pa-detail-panel--overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  height: 100vh;
+  z-index: $detail-panel-z-index;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+
+  &.pa-detail-panel--open {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: all;
+
+    .pa-detail-panel__content {
+      transform: translateX(0);
+    }
+  }
+}
+
+// ============================================================================
+// SHARED PANEL STRUCTURE (used by both inline and overlay modes)
+// ============================================================================
+
+// Panel content wrapper (flex column: header/body/footer)
+.pa-detail-panel__content {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-color: var(--pa-card-bg);
+  position: relative;
+
+  // In overlay mode: slide-in from right
+  .pa-detail-panel--overlay & {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: var(--pa-local-detail-panel-width);
+    max-width: var(--pa-local-detail-panel-max-width);
+    box-shadow: $detail-panel-shadow;
+    transform: translateX(100%);
+  }
+}
+
+// Backdrop overlay (overlay mode only)
+.pa-detail-panel__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: var(--pa-detail-panel-overlay-bg);
+  cursor: pointer;
+}
+
+// Panel header
+.pa-detail-panel__header {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+  padding: $detail-panel-header-padding-v $detail-panel-header-padding-h;
+  border-bottom: $border-width-base solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+  min-height: 0;
+}
+
+// Panel title
+.pa-detail-panel__title {
+  flex: 1;
+  margin: 0;
+  font-size: $font-size-lg;
+  font-weight: $font-weight-semibold;
+  color: var(--pa-text-color-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+// Close button
+.pa-detail-panel__close {
+  width: $detail-panel-close-size;
+  height: $detail-panel-close-size;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--pa-text-color-2);
+  border-radius: $border-radius;
+
+  &:hover {
+    background-color: var(--pa-accent-light);
+    color: var(--pa-accent);
+  }
+
+  &:focus {
+    outline: $focus-outline-width solid var(--pa-accent);
+    outline-offset: $focus-outline-offset;
+  }
+}
+
+// Panel tabs (between header and body, like profile panel)
+.pa-detail-panel__tabs {
+  flex-shrink: 0;
+  padding: 0 $detail-panel-header-padding-h;
+  border-bottom: $border-width-base solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+
+  .pa-tabs__item {
+    color: var(--pa-text-color-2);
+    border-bottom-color: transparent;
+
+    &:hover {
+      color: var(--pa-text-color-1);
+      background-color: var(--pa-accent-light);
+    }
+
+    &--active {
+      color: var(--pa-text-color-1);
+      border-bottom-color: var(--pa-accent);
+    }
+  }
+}
+
+// Panel body (scrollable)
+.pa-detail-panel__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: $detail-panel-body-padding-v $detail-panel-body-padding-h;
+}
+
+// Panel footer
+.pa-detail-panel__footer {
+  flex-shrink: 0;
+  padding: $detail-panel-footer-padding-v $detail-panel-footer-padding-h;
+  border-top: $border-width-base solid var(--pa-border-color);
+  background-color: var(--pa-card-bg);
+  display: flex;
+  align-items: center;
+  gap: $spacing-sm;
+}
+
+// ============================================================================
+// RESIZE HANDLE
+// ============================================================================
+
+.pa-detail-panel-resize {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: $detail-panel-resize-handle-width;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 1;
+
+  &:hover,
+  &--active {
+    background-color: var(--pa-accent);
+    opacity: 0.3;
+  }
+}
+
+// Body class applied during resize drag
+.pa-detail-panel-resizing {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+// ============================================================================
+// TABLE ROW SELECTION
+// ============================================================================
+
+.pa-table tbody tr.is-selected {
+  background-color: var(--pa-detail-panel-selected-bg);
+
+  &:hover {
+    background-color: var(--pa-detail-panel-selected-bg);
+  }
+}
+
+// ============================================================================
+// RESPONSIVE: Inline collapses to overlay on mobile
+// ============================================================================
+
+@media (max-width: $mobile-breakpoint) {
+  // Inline mode: hide the panel from the flex layout
+  .pa-detail-view__panel {
+    display: none;
+  }
+
+  // Mobile overlay: shown as fixed overlay instead
+  .pa-detail-panel--mobile-overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    z-index: $detail-panel-z-index;
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+
+    &.pa-detail-panel--open {
+      opacity: 1;
+      visibility: visible;
+      pointer-events: all;
+
+      .pa-detail-panel__content {
+        transform: translateX(0);
+      }
+    }
+
+    .pa-detail-panel__content {
+      position: absolute;
+      top: 0;
+      right: 0;
+      height: 100vh;
+      width: $detail-panel-mobile-width;
+      max-width: none;
+      box-shadow: $detail-panel-shadow;
+      transform: translateX(100%);
+    }
+
+    .pa-detail-panel__overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background-color: var(--pa-detail-panel-overlay-bg);
+      cursor: pointer;
+    }
+  }
+}

package/src/scss/variables/_components.scss

@@ -147,6 +147,26 @@ $profile-role-letter-spacing: 0.5px !default;
 $profile-panel-mobile-max-width: 40rem !default;  // 400px (was 25rem)
 $profile-panel-content-padding: 1.6rem !default;  // Matches sidebar-padding horizontal (16px)
 
+// ============================================================================
+// DETAIL PANEL SYSTEM
+// ============================================================================
+$detail-panel-width: 40rem !default;
+$detail-panel-min-width: 28rem !default;
+$detail-panel-max-width: 64rem !default;
+$detail-panel-mobile-width: 90vw !default;
+$detail-panel-header-padding-v: 1.2rem !default;
+$detail-panel-header-padding-h: 1.6rem !default;
+$detail-panel-body-padding-v: 1.2rem !default;
+$detail-panel-body-padding-h: 1.6rem !default;
+$detail-panel-footer-padding-v: 1.2rem !default;
+$detail-panel-footer-padding-h: 1.6rem !default;
+$detail-panel-overlay-bg: rgba(0, 0, 0, 0.3) !default;
+$detail-panel-z-index: 4500 !default;
+$detail-panel-shadow: $shadow-profile-panel !default;
+$detail-panel-close-size: 3.2rem !default;
+$detail-panel-resize-handle-width: 6px !default;
+$detail-panel-selected-bg: rgba($accent-color, 0.08) !default;
+
 // ============================================================================
 // CARD SYSTEM
 // ============================================================================