@keenmate/pure-admin-core 2.8.0 → 2.9.0-rc03

package/src/scss/core-components/_splitter.scss

@@ -0,0 +1,206 @@
+/* ========================================
+   Splitter Component
+   Resizable container with draggable gutters (2 or more panes).
+   Modifiers:
+     --horizontal       panes side-by-side, vertical gutter (default)
+     --vertical         panes stacked, horizontal gutter
+     --dragging         applied to root while user is dragging
+     --collapsed        start pane has been collapsed to 0
+     --minimize-mirror  flip rail-title text 180° (bottom-to-top reading)
+
+   Rail mode is fully decoupled from any specific component. The splitter
+   only rotates elements marked `[data-pa-splitter-rail-title]` inside a
+   minimized pane; per-component adaptation (e.g. card body / footer
+   hiding) lives in that component's SCSS, keyed off
+   `.pa-splitter__pane--minimized > .pa-foo`. Card integration is in
+   `_cards.scss`.
+   ======================================== */
+@use '../variables' as *;
+
+// Default rail width — exposed as a runtime token so themes and per-instance
+// inline styles can override without having to set both the SCSS variable
+// (compile-time) and the JS attribute. The JS reads this same custom
+// property via getComputedStyle to keep its default in sync.
+:root {
+  --pa-splitter-rail-size: #{$splitter-rail-size};
+}
+
+.pa-splitter {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+
+  // Horizontal split: panes laid out as a row, gutter is a vertical bar.
+  // Gutter thickness is overridable per-instance via --pa-splitter-gutter-size;
+  // breathing room around the gutter via native `gap` (the JS subtracts it
+  // from the available space, so percent constraints stay accurate).
+  &--horizontal {
+    flex-direction: row;
+
+    > .pa-splitter__gutter {
+      cursor: col-resize;
+      width: var(--pa-splitter-gutter-size, #{$splitter-gutter-size});
+      height: auto;
+      align-self: stretch;
+
+      &::before {
+        width: $splitter-gutter-grip-thickness;
+        height: $splitter-gutter-grip-length;
+      }
+    }
+  }
+
+  // Vertical split: panes stacked as a column, gutter is a horizontal bar.
+  &--vertical {
+    flex-direction: column;
+
+    > .pa-splitter__gutter {
+      cursor: row-resize;
+      width: auto;
+      height: var(--pa-splitter-gutter-size, #{$splitter-gutter-size});
+      align-self: stretch;
+
+      &::before {
+        width: $splitter-gutter-grip-length;
+        height: $splitter-gutter-grip-thickness;
+      }
+    }
+  }
+
+  // While dragging: kill text selection and transitions, neutralize pane content
+  // pointer events so dragging over an iframe/embedded widget doesn't get hijacked.
+  // Only the gutter that's actually being dragged gets the "active" highlight —
+  // siblings stay in their resting state. The JS adds `--active` on the dragged
+  // gutter in pointerdown and removes it in pointerup. Sibling gutters also get
+  // `pointer-events: none` so their `:hover` doesn't fire as the cursor passes
+  // over them during the drag (otherwise they'd light up via hover).
+  &--dragging {
+    user-select: none;
+
+    > .pa-splitter__pane {
+      pointer-events: none;
+    }
+
+    // Sibling gutters during drag: kill pointer events (no hover firing as
+    // cursor passes over them) AND override any lingering focus-visible
+    // styling (a previous keyboard focus on a non-active gutter would
+    // otherwise look identical to the active state — both colour the
+    // gutter blue).
+    > .pa-splitter__gutter:not(.pa-splitter__gutter--active) {
+      pointer-events: none;
+
+      &:focus-visible {
+        box-shadow: none;
+
+        &::before {
+          background-color: $splitter-gutter-grip-color;
+        }
+      }
+    }
+  }
+
+  &__gutter--active {
+    background-color: $splitter-gutter-active-bg;
+
+    &::before {
+      background-color: $splitter-gutter-grip-hover-color;
+    }
+  }
+
+  &__pane {
+    overflow: auto;
+    min-width: 0;
+    min-height: 0;
+
+    // Start pane carries the explicit size set inline by JS (flex-basis).
+    // flex-grow: 0 keeps it from absorbing free space; flex-shrink: 0 stops
+    // the browser from squishing it below the JS-applied size when content
+    // overflows.
+    &--start {
+      flex: 0 0 auto;
+    }
+
+    // End pane fills whatever's left over.
+    &--end {
+      flex: 1 1 0;
+    }
+
+    // Minimized state — pane locks to rail width via flex-basis (JS-set).
+    // The splitter's only job here is providing the rail-title rotation hook;
+    // it does NOT hide sibling content or know about specific components.
+    // Per-component adaptation (e.g. hiding card body / footer) lives in
+    // that component's SCSS, see `_cards.scss` for the card integration.
+    &--minimized {
+      cursor: pointer;
+      overflow: hidden;
+    }
+  }
+
+  // Generic rail-title hook. Any element marked `[data-pa-splitter-rail-title]`
+  // inside a minimized pane rotates to vertical writing. Consumers can put
+  // this attribute on a card header, a plain heading, a div with an icon —
+  // anything they want shown rotated when the pane is railed.
+  //
+  // sideways-rl: text reads top-to-bottom, glyphs rotated 90° clockwise
+  // (tilt head right). Script-agnostic — for Latin text this matches
+  // vertical-rl visually.
+  &__pane--minimized [data-pa-splitter-rail-title] {
+    writing-mode: sideways-rl;
+
+    // Keep icons upright — they inherit the parent writing-mode by default,
+    // which rotates the glyph along with the title. Resetting to initial
+    // (horizontal-tb) keeps them in their natural orientation.
+    i,
+    svg {
+      writing-mode: initial;
+    }
+  }
+
+  // Optional: mirror the minimized title 180° so the text reads bottom-to-top
+  // with upside-down glyphs. Applied to the heading element inside any
+  // rail-title element — padding, alignment, and sibling content are
+  // unaffected.
+  &--minimize-mirror .pa-splitter__pane--minimized [data-pa-splitter-rail-title] :is(h1, h2, h3, h4, h5, h6) {
+    transform: scale(-1, -1);
+  }
+
+  &__gutter {
+    position: relative;
+    flex: 0 0 auto;
+    background-color: $splitter-gutter-bg;
+    transition: $splitter-transition;
+    touch-action: none; // prevents browser scroll/zoom while dragging on touch
+    outline: none;
+
+    // Centered grip indicator. Width/height per orientation modifier above.
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background-color: $splitter-gutter-grip-color;
+      border-radius: $border-radius-sm;
+      transition: $splitter-transition;
+    }
+
+    &:hover {
+      background-color: $splitter-gutter-hover-bg;
+
+      &::before {
+        background-color: $splitter-gutter-grip-hover-color;
+      }
+    }
+
+    &:focus-visible {
+      box-shadow: inset 0 0 0 $splitter-focus-ring-width $splitter-focus-ring-color;
+
+      &::before {
+        background-color: $splitter-gutter-grip-hover-color;
+      }
+    }
+  }
+}

package/src/scss/variables/_base.scss

@@ -50,14 +50,6 @@ $base-hover-bg: $base-subtle-bg !default;         // Hover state background
 $base-active-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;  // Active/pressed state
 $base-disabled-bg: $base-subtle-bg !default;      // Disabled element background
 
-// Legacy aliases (backward compatibility)
-$base-surface-1: $base-main-bg !default;
-$base-surface-2: $base-page-bg !default;
-$base-surface-3: $base-subtle-bg !default;
-$base-surface-inverse: $base-inverse-bg !default;
-$base-primary-bg: $base-main-bg !default;
-$base-primary-bg-hover: color.adjust($base-main-bg, $lightness: -5%) !default;
-
 // =============================================================================
 // BORDER COLORS
 // Border colors and shorthand
@@ -71,7 +63,7 @@ $base-border: 1px solid $base-border-color !default;
 // Input field styling and states
 // =============================================================================
 
-$base-input-bg: $base-surface-1 !default;
+$base-input-bg: $base-main-bg !default;
 $base-input-color: #495057 !default;
 $base-input-border: 1px solid #ced4da !default;
 $base-input-border-hover: 1px solid #b8bfc6 !default;
@@ -91,7 +83,7 @@ $base-input-size-xl-height: 4.1 !default;  // 41px
 // Floating element styling
 // =============================================================================
 
-$base-dropdown-bg: $base-surface-1 !default;
+$base-dropdown-bg: $base-main-bg !default;
 $base-dropdown-border: 1px solid $base-border-color !default;
 $base-dropdown-box-shadow: 0 8px 16px $base-shadow-color !default;
 
@@ -100,7 +92,7 @@ $base-dropdown-box-shadow: 0 8px 16px $base-shadow-color !default;
 // Tooltip styling
 // =============================================================================
 
-$base-tooltip-bg: $base-surface-inverse !default;
+$base-tooltip-bg: $base-inverse-bg !default;
 $base-tooltip-text-color: #ffffff !default;
 
 // =============================================================================

package/src/scss/variables/_colors.scss

@@ -20,23 +20,23 @@ $text-color-2: $base-text-color-2 !default;
 $border-color: $base-border-color !default;
 
 // Header colors
-$header-bg: $base-surface-1 !default;
+$header-bg: $base-main-bg !default;
 $header-border-color: $base-border-color !default;
 $header-text: $base-text-color-1 !default;
 $header-text-secondary: $base-text-color-2 !default;
 $header-profile-name-color: $base-text-color-1 !default;
 
 // Sidebar colors
-$sidebar-bg: $base-surface-2 !default;
+$sidebar-bg: $base-page-bg !default;
 $sidebar-text: $base-text-color-1 !default;
 $sidebar-text-secondary: $base-text-color-2 !default;
-$sidebar-submenu-bg: $base-surface-3 !default;
-$sidebar-submenu-hover-bg: color.adjust($base-surface-3, $lightness: -5%) !default;
-$sidebar-submenu-active-bg: color.adjust($base-surface-3, $lightness: -10%) !default;
+$sidebar-submenu-bg: $base-subtle-bg !default;
+$sidebar-submenu-hover-bg: color.adjust($base-subtle-bg, $lightness: -5%) !default;
+$sidebar-submenu-active-bg: color.adjust($base-subtle-bg, $lightness: -10%) !default;
 $sidebar-submenu-active-text: $sidebar-text !default;
 
 // Footer colors
-$footer-bg: $base-surface-1 !default;
+$footer-bg: $base-main-bg !default;
 $footer-border-color: $base-border-color !default;
 
 // Accent colors (derived from base)
@@ -48,10 +48,10 @@ $accent-light: $base-accent-color-light !default;
 // CARD COLORS (derived from base surfaces)
 // =============================================================================
 
-$card-bg: $base-surface-1 !default;
-$card-header-bg: $base-surface-2 !default;
-$card-footer-bg: $base-surface-1 !default;
-$card-tabs-bg: $base-surface-2 !default;
+$card-bg: $base-main-bg !default;
+$card-header-bg: $base-page-bg !default;
+$card-footer-bg: $base-main-bg !default;
+$card-tabs-bg: $base-page-bg !default;
 
 // =============================================================================
 // INPUT COLORS (derived from base input vars)
@@ -65,10 +65,10 @@ $input-text: $base-input-color !default;
 // TABLE COLORS (derived from base surfaces)
 // =============================================================================
 
-$table-stripe: $base-surface-2 !default;
-$table-bg: $base-surface-1 !default;
-$table-header-bg: $base-surface-2 !default;
-$table-hover-bg: $base-surface-2 !default;
+$table-stripe: $base-page-bg !default;
+$table-bg: $base-main-bg !default;
+$table-header-bg: $base-page-bg !default;
+$table-hover-bg: $base-page-bg !default;
 
 // Table row hover accent (border)
 $table-hover-accent-width: 0 !default;
@@ -111,8 +111,8 @@ $btn-info-bg-hover: $base-info-color-hover !default;
 $btn-info-text: $base-text-on-info !default;
 
 // Light button
-$btn-light-bg: $base-surface-2 !default;
-$btn-light-bg-hover: $base-surface-3 !default;
+$btn-light-bg: $base-page-bg !default;
+$btn-light-bg-hover: $base-subtle-bg !default;
 $btn-light-text: $base-text-color-1 !default;
 
 // Dark button
@@ -164,9 +164,9 @@ $info-text-light: $base-info-text-light !default;
 $secondary-bg: $btn-secondary-bg !default;
 $secondary-bg-hover: $btn-secondary-bg-hover !default;
 $secondary-text: #383d41 !default;
-$secondary-light-bg: $base-surface-3 !default;
+$secondary-light-bg: $base-subtle-bg !default;
 $secondary-light-text: $base-text-color-1 !default;
-$secondary-lighter-bg: $base-surface-3 !default;
+$secondary-lighter-bg: $base-subtle-bg !default;
 
 // =============================================================================
 // TOOLTIP & POPOVER COLORS (derived from base)
@@ -177,7 +177,7 @@ $tooltip-text: $base-tooltip-text-color !default;
 
 $popover-text-light: #ffffff !default;
 $popover-text-dark: #000000 !default;
-$popover-content-bg: $base-surface-1 !default;
+$popover-content-bg: $base-main-bg !default;
 
 // =============================================================================
 // CODE LANGUAGE COLORS (standalone - not themed)

package/src/scss/variables/_components.scss

@@ -143,7 +143,6 @@ $profile-section-gap: $spacing-xl !default;
 $profile-overlay-bg: rgba(0, 0, 0, 0.3) !default;
 $profile-button-padding-v: $spacing-sm !default;
 $profile-button-padding-h: $spacing-md !default;
-$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)
 
@@ -188,6 +187,11 @@ $card-tab-inline-padding-v: 0.3rem !default;   // 3px - compact for header
 $card-tab-inline-padding-h: 0.8rem !default;   // 8px
 $card-tab-hover-opacity: 0.1 !default;
 
+// Responsive actions — header width below which the spread button list
+// hides and the collapsed (split-button) form takes over. Default 28rem
+// = 280px, which fits a 3-button action set comfortably.
+$card-actions-collapse-at: 28rem !default;
+
 // ============================================================================
 // TABLE SYSTEM
 // ============================================================================
@@ -773,3 +777,20 @@ $bar-list-bar-bg: rgba(0, 0, 0, 0.06) !default;
 $bar-list-label-font-size: $font-size-sm !default;
 $bar-list-value-font-size: $font-size-sm !default;
 $bar-list-value-font-weight: $font-weight-semibold !default;
+
+// ============================================================================
+// SPLITTER SYSTEM
+// ============================================================================
+$splitter-gutter-size: 0.6rem !default;                        // 6px gutter thickness
+$splitter-gutter-bg: rgba(128, 128, 128, 0.08) !default;
+$splitter-gutter-hover-bg: rgba(128, 128, 128, 0.18) !default;
+$splitter-gutter-active-bg: rgba($accent-color, 0.35) !default; // mid-drag
+$splitter-gutter-grip-length: 2.4rem !default;                 // 24px grip indicator
+$splitter-gutter-grip-thickness: 2px !default;
+$splitter-gutter-grip-color: rgba(128, 128, 128, 0.45) !default;
+$splitter-gutter-grip-hover-color: $accent-color !default;
+$splitter-focus-ring-color: rgba($accent-color, 0.4) !default;
+$splitter-focus-ring-width: 2px !default;
+$splitter-transition: background-color 0.15s ease !default;
+$splitter-pane-min-size: 0 !default;                           // absolute floor regardless of constraints
+$splitter-rail-size: 4rem !default;                            // 40px — start pane width when minimized to rail

package/src/scss/variables/_system.scss

@@ -3,6 +3,14 @@
 // Z-index, opacity, transitions, animations, shadows
 // ============================================================================
 
+// Theme color-scheme signal to the browser. Drives native UA elements
+// (scrollbars, form controls) and the `light-dark()` CSS function. Themes
+// override BEFORE `@import variables/index`. Values: `light`, `dark`,
+// `light dark` (let OS preference decide), or `only light` / `only dark`
+// to ignore OS preference. Per-mode overrides (e.g. `color-scheme: dark;`
+// inside a `.pa-mode-dark` block) take precedence via the cascade.
+$theme-color-scheme: light !default;
+
 // Z-index scale (increments of 1000 for easy adjustment)
 $z-index-base: 0 !default;
 $z-index-content: 1000 !default;

package/src/scss/.claude/settings.local.json

@@ -1,11 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "Bash(mkdir:*)",
-      "Read(//c/Git/KM/pure-admin/pure-admin-visual/**)",
-      "Bash(npm run build-all:*)"
-    ],
-    "deny": [],
-    "ask": []
-  }
-}