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

package/README.md

@@ -2,20 +2,22 @@
 
 Lightweight, data-focused CSS/SCSS admin framework with Corporate theme as default.
 
-## What's New in 2.9.0-rc01
-
-- **`color-scheme` now emitted per theme via the new `$theme-color-scheme` SCSS variable.** Themes signal their colour scheme to the browser so native UA elements (scrollbars, form controls, `<input type="date">`) and the CSS `light-dark()` function resolve correctly. Previously themes applied dark palettes via `--pa-*` / `--base-*` overrides alone, so the browser still saw the host page as `color-scheme: normal` (effectively light) — embedded web components (`web-multiselect`, `web-daterangepicker`) using `light-dark()` for adaptive palettes silently picked the light value on dark themes. Themes set `$theme-color-scheme: dark` (always-dark) or add a one-line `color-scheme: dark;` to their `.pa-mode-dark` block (dual-mode). The unthemed `dist/css/main.css` now ships `color-scheme: light` at `:root`.
-- **Six `--base-*` legacy aliases dropped (breaking for consumers using them directly).** `--base-surface-1`, `--base-surface-2`, `--base-surface-3`, `--base-surface-inverse`, `--base-primary-bg`, `--base-primary-bg-hover` are gone — they aliased to existing semantic tokens (`--base-main-bg` / `--base-page-bg` / `--base-subtle-bg` / `--base-inverse-bg`) with no behavioural difference and added taxonomy confusion. `--base-primary-bg` specifically broke `web-multiselect@1.10.0+` dark-mode hover (its smart `color-mix` fallback was short-circuited by our compile-time `#ffffff` emit). Migration: rename to the matching `--base-*-bg` semantic name; for `--base-primary-bg-hover` consumers, switch to `--base-hover-bg` or compose with `color-mix`.
-- **Profile panel role chip migrated to `.pa-badge` (markup-breaking).** The bespoke `.pa-profile-panel__role` class hardcoded uppercase + letter-spacing and pointed at `--pa-header-profile-name-color`, which rendered as black-on-dark in panel context. Replaced with the standard `.pa-badge` component (theme-tuned for both modes). Snippet markup updated: `<span class="pa-profile-panel__role">…</span>` → `<span class="pa-badge">…</span>`. Use `.pa-badge--light` / `--primary` / `--info` / `--success` / `--warning` / `--danger` for variants.
-- **Coloured card variants no longer leak white pixels around the header chrome.** Two independent causes addressed together — corner-radius mismatch at the header's TOP corners (header's 8px curved more than the card's effective 7px inner radius, exposing a thin slice of card bg) and a gray hairline along the header's BOTTOM edge (border-bottom stayed `--pa-border-color` on coloured variants). The header now omits `border-top-*-radius` (card's `overflow: hidden` clips it) and each variant overrides `border-bottom-color` to match its background. Affects `.pa-card--primary` / `--success` / `--warning` / `--danger` and `.pa-card--color-1` through `--color-9`.
-
-## What's New in 2.8.0
-
-- **CSS variable defaults now ship at `:root` in `dist/css/main.css`.** The unthemed bundle previously had no `--pa-*` / `--base-*` values — they were emitted only by theme stylesheets, so consuming `@keenmate/pure-admin-core/css` standalone (or any page before its theme link resolved) left tokens unresolved and components rendered with broken fallbacks (KPI sparklines and deltas in near-black via inherited text colour, web components reverting to hardcoded literals). `main.scss` now emits `output-base-css-variables`, `output-pa-css-variables`, and `output-pa-alert-variables-light` at `:root` for a complete neutral default. Themes are unaffected — they emit their own `:root` from their theme file and all 15 themes rebuild byte-identical. Supersedes the partial 2.7.1-era sentiment-scale fallback patch.
-- **KPI layout modifiers and CSS-variable knobs across four showcases.** `.pa-kpi-spark-list--no-delta` drops the Δ% column (with track widths now lifted to local SCSS variables for one source of truth); `.pa-kpi-hero-list__layout--hero-2-3` / `--hero-3-4` shift the hero/rail split off the locked 50/50; `.pa-kpi-bento__grid--hero-right` mirrors the default and `--5-tile` swaps to a five-tile composition, plus a new `--pa-kpi-bento-row-height` variable for tuning row height per instance.
-- **KPI grids redesigned as cell-min-driven auto-fit (Visual breaking).** `.pa-kpi-gauge-list__grid` and `.pa-kpi-edit__grid` swap fixed `repeat(N, 1fr)` + `@container` breakpoints for `repeat(auto-fit, minmax(var(--pa-kpi-X-cell-min, …), 1fr))` — intrinsic responsive cascade, no `@container` queries on the grids. Five new cap-at-N modifiers (`--max-2` through `--max-6`) constrain column count without forcing it; a `--2col` modifier forces a deterministic 2×N rhythm. Migration: bare grids with fixed item counts may produce uneven rows at widths that fit 4+ columns — add the appropriate `--max-N` to preserve a fixed rhythm.
-- **`.pa-kpi-terminal` view-mode toggle generalised to a tab strip (Visual breaking).** `__viewtoggle`/`__viewbtn` renamed to `__tabs`/`__tab`; `data-view` attribute on the root is gone in favour of `data-tab` on tabs and panes; the per-tile `__value[data-mode]` triple-value mechanism is removed. Each tab now swaps in a separate `__pane` with its own tile set and grid layout — authors can put a different number of tiles (and a different grid modifier) behind each tab. JS contract: `initTerminalViewToggle` → `initTerminalTabs`.
-- **`.pa-kpi-strip` column toggles extended to a composable 2–5 column family.** Three independently composable toggle modifiers (`--no-prev`, `--no-delta`, `--no-target`) replace the previous fixed 4/5-col shapes, yielding eight visible-column combinations. Per-column header classes (`__head--metric`/`--now`/`--prev`/`--delta`/`--target`) keep the header row in sync with the data rows. Track widths lifted to local SCSS variables so the eight precomputed templates share one source of truth.
+## What's New in 2.9.0-rc03
+
+- **`.pa-splitter` drag model reworked to "rebalance-on-drag".** Each gutter now resizes only its primary neighbour (edge-closer side, LTR/RTL tiebreaker on ties); the matching delta is absorbed by the immediate adjacent non-rail pane (classic boundary feel), or — when the adjacent pane is rail — tunnels through the rail wall to the contiguous non-rail block beyond. Eliminates the "boundary locks when both sides are rail" deadlock from the prior model — drag-from-rail with a railed neighbour now grows the primary by pulling room from the next section.
+- **Middle panes can now minimize to rail** (previously first / last only). Any pane with `data-pa-splitter-minimize` collapses on toggle / dblclick / drag-snap regardless of position. Snap-into-rail enforces an "at least one expanded pane" invariant — you can't drag the last visible pane to rail and end up with nothing to grab.
+- **Restoring a minimized pane reclaims layout gaps cleanly.** When a prior minimize hit an absorber's `max` cap and left empty space in the layout, restoring the pane now reaches its remembered size by drawing from the gap (not just from other panes' shrink headroom) — fixes the "restored pane stuck at min width" surprise. Conversely, restoring no longer aggressively inflates a sibling pane to fill remaining gap — empty space stays as empty space and gets consumed as more panes restore. No more "sibling pane suddenly jumps" UX.
+- **Rail width in `--pa-splitter-rail-size` now correctly resolves `rem` / non-px units.** Previously `parseFloat("4rem")` returned `4` and snapped rail panes to 4px-wide strips; rebuilt via a hidden probe element so the browser does the unit resolution. The three-step fallback chain (per-instance attribute → CSS var → literal 40) still applies.
+- **Gutter highlighting now isolates the dragged gutter only.** During a drag, the splitter `--dragging` modifier suppresses `:hover` / `:focus-visible` on sibling gutters so they don't light up as the cursor passes over them or as a stale focus ring lingers — only the active gutter carries the highlight.
+- **Splitter padding subtracted from available space.** Flex children sit inside the splitter's content box but `clientWidth` includes padding — without subtracting it the last pane's `flex-basis` overflowed and got clipped by `overflow: hidden`. Visible in the N-pane demo where the rightmost rail's right edge touched the splitter border.
+
+## What's New in 2.9.0-rc02
+
+- **`.pa-splitter` — resizable container with optional collapse-to-rail.** Vanilla JS + SCSS, two orientations (`--horizontal` / `--vertical`), per-instance constraints (`min-start` / `max-start` accept px or %), and `localStorage` persistence via `data-pa-splitter-id`. Pointer-event drag (mouse / touch / pen), `gap`-aware constraint math, keyboard a11y on the gutter (`role="separator"`, arrow keys, `Home`/`End`, `Enter`/`Space` to toggle), and a `ResizeObserver`-driven re-clamp on container resize. Opt-in `data-pa-splitter-minimize="start" | "end"` collapses a pane to a thin sideways-rotated header rail; dragging past a snap threshold commits, dragging back outward restores.
+- **`.pa-splitter` N-pane mode (3+ panes).** `init()` is now a dispatcher: the legacy 2-pane path (selected by `pane--start` + `pane--end` markup) is preserved byte-identical; everything else goes through `initNPane()`. Per-pane API: `data-pa-splitter-size="240px|30%"` for initial sizing, `-min` / `-max` for per-pane clamps, `data-pa-splitter-minimize` as presence marker (first / last pane only — middle-pane rail rotation has nowhere clean to dock). Drag math is per-gutter stop-at-min (Split.js basic-mode semantics). Container-resize redistributes proportionally to unminimized panes; minimized panes stay pinned to rail. Storage shape versioned under the same `pa-splitter:<id>` key.
+- **`pa-card__actions--responsive` — CSS-only collapse to a split button when the header runs out of space.** Render both forms inline (`pa-card__actions-full` + `pa-card__actions-collapsed`, the latter hosting a `pa-btn-split`); a container query on `.pa-card__header:has(> .pa-card__actions--responsive)` swaps which is visible. Threshold lives in one SCSS variable (`$card-actions-collapse-at`, default `28rem`). No JS, no `ResizeObserver` — but action data is duplicated in the DOM.
+- **`pa-card__actions--overflow` — JS-driven progressive collapse into a "..." menu.** Complement to `--responsive`: walks buttons into an overflow menu one at a time as space shrinks, restoring them in original DOM order as it grows. `data-pa-actions-overflow-from="end" | "start"` controls drop direction; `data-pa-actions-priority="N"` per button pins primary actions. Menu reuses `pa-btn-split__menu` styling (one menu source across split-button and overflow). Positioning via Floating UI (`computePosition` + `offset` + `flip` + `shift` + `autoUpdate`), with a hand-rolled fallback when `FloatingUIDOM` isn't loaded. Auto-closes on any wrapper resize or when the trigger goes `display: none` (e.g. splitter rail mode).
+- **`pa-btn--ghost` variant defined in core.** Previously referenced by demo files (`alerts`, `notifications`, `splitter`) but had no SCSS rule — every usage silently rendered as a base `.pa-btn`. Now defined in `_buttons.scss`: transparent background and border, `var(--pa-text-secondary)` text, hover snaps to `var(--pa-surface-hover)` + `--pa-text-color-1`. No new tokens introduced; themes need a rebuild to pick up the variant.
 
 ## Installation
 

package/dist/css/main.css

@@ -5484,6 +5484,12 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
 .pa-card__header .pa-btn-group {
   flex-shrink: 0;
 }
+.pa-card__header .pa-card__actions--overflow {
+  flex-shrink: 1;
+}
+.pa-card__header:has(> .pa-card__actions--overflow) > .pa-card__title {
+  min-width: 6rem;
+}
 .pa-card__header .pa-btn {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
@@ -5593,6 +5599,25 @@ body:not(.sidebar-hidden) .pa-layout__sidebar--icon-collapse .pa-sidebar__icon {
   gap: 0.8rem;
   align-items: center;
 }
+.pa-card__actions--responsive > .pa-card__actions-full {
+  display: flex;
+  gap: 0.8rem;
+  align-items: center;
+}
+.pa-card__actions--responsive > .pa-card__actions-collapsed {
+  display: none;
+}
+.pa-card__actions--overflow {
+  min-width: 0;
+  overflow: hidden;
+}
+.pa-card__actions--overflow > * {
+  flex-shrink: 0;
+}
+.pa-card__header:has(> .pa-card__actions--responsive) {
+  container-type: inline-size;
+  container-name: pa-card-header;
+}
 .pa-card__meta {
   color: var(--pa-text-color-2);
   font-size: 1.4rem;
@@ -5922,6 +5947,48 @@ a.pa-card p {
   padding-bottom: 0.8rem;
 }
 
+@container pa-card-header (max-width: 28rem) {
+  .pa-card__actions--responsive > .pa-card__actions-full {
+    display: none;
+  }
+  .pa-card__actions--responsive > .pa-card__actions-collapsed {
+    display: flex;
+    align-items: center;
+  }
+}
+.pa-splitter__pane--minimized > .pa-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+}
+.pa-splitter__pane--minimized > .pa-card > .pa-card__body,
+.pa-splitter__pane--minimized > .pa-card > .pa-card__footer {
+  display: none;
+}
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header {
+  flex: 1 1 auto;
+  justify-content: flex-start;
+  writing-mode: sideways-rl;
+}
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header i,
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header svg {
+  writing-mode: initial;
+}
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header .pa-card__title {
+  padding-top: calc((4rem - 1.6rem) / 2 - 0.5rem);
+}
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header .pa-btn,
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header .pa-btn-group,
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header button,
+.pa-splitter__pane--minimized > .pa-card > .pa-card__header input {
+  display: none;
+}
+
+.pa-splitter--minimize-mirror .pa-splitter__pane--minimized > .pa-card > .pa-card__header :is(h1, h2, h3, h4, h5, h6) {
+  transform: scale(-1, -1);
+}
+
 /* ========================================
    Tabs Component
    Standalone tabs for organizing content into separate sections
@@ -7306,6 +7373,15 @@ a.pa-card p {
   background-color: var(--pa-main-bg);
   border-color: var(--pa-accent);
 }
+.pa-btn--ghost {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--pa-text-secondary);
+}
+.pa-btn--ghost:hover {
+  background-color: var(--pa-surface-hover);
+  color: var(--pa-text-color-1);
+}
 .pa-btn--xs {
   height: 3.1rem;
   padding: 0.6rem 0.8rem;
@@ -15242,6 +15318,138 @@ code {
   transform: rotate(180deg);
 }
 
+/* ========================================
+   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`.
+   ======================================== */
+:root {
+  --pa-splitter-rail-size: 4rem;
+}
+
+.pa-splitter {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+.pa-splitter--horizontal {
+  flex-direction: row;
+}
+.pa-splitter--horizontal > .pa-splitter__gutter {
+  cursor: col-resize;
+  width: var(--pa-splitter-gutter-size, 0.6rem);
+  height: auto;
+  align-self: stretch;
+}
+.pa-splitter--horizontal > .pa-splitter__gutter::before {
+  width: 2px;
+  height: 2.4rem;
+}
+.pa-splitter--vertical {
+  flex-direction: column;
+}
+.pa-splitter--vertical > .pa-splitter__gutter {
+  cursor: row-resize;
+  width: auto;
+  height: var(--pa-splitter-gutter-size, 0.6rem);
+  align-self: stretch;
+}
+.pa-splitter--vertical > .pa-splitter__gutter::before {
+  width: 2.4rem;
+  height: 2px;
+}
+.pa-splitter--dragging {
+  user-select: none;
+}
+.pa-splitter--dragging > .pa-splitter__pane {
+  pointer-events: none;
+}
+.pa-splitter--dragging > .pa-splitter__gutter:not(.pa-splitter__gutter--active) {
+  pointer-events: none;
+}
+.pa-splitter--dragging > .pa-splitter__gutter:not(.pa-splitter__gutter--active):focus-visible {
+  box-shadow: none;
+}
+.pa-splitter--dragging > .pa-splitter__gutter:not(.pa-splitter__gutter--active):focus-visible::before {
+  background-color: rgba(128, 128, 128, 0.45);
+}
+.pa-splitter__gutter--active {
+  background-color: rgba(0, 123, 255, 0.35);
+}
+.pa-splitter__gutter--active::before {
+  background-color: #007bff;
+}
+.pa-splitter__pane {
+  overflow: auto;
+  min-width: 0;
+  min-height: 0;
+}
+.pa-splitter__pane--start {
+  flex: 0 0 auto;
+}
+.pa-splitter__pane--end {
+  flex: 1 1 0;
+}
+.pa-splitter__pane--minimized {
+  cursor: pointer;
+  overflow: hidden;
+}
+.pa-splitter__pane--minimized [data-pa-splitter-rail-title] {
+  writing-mode: sideways-rl;
+}
+.pa-splitter__pane--minimized [data-pa-splitter-rail-title] i,
+.pa-splitter__pane--minimized [data-pa-splitter-rail-title] svg {
+  writing-mode: initial;
+}
+.pa-splitter--minimize-mirror .pa-splitter__pane--minimized [data-pa-splitter-rail-title] :is(h1, h2, h3, h4, h5, h6) {
+  transform: scale(-1, -1);
+}
+.pa-splitter__gutter {
+  position: relative;
+  flex: 0 0 auto;
+  background-color: rgba(128, 128, 128, 0.08);
+  transition: background-color 0.15s ease;
+  touch-action: none;
+  outline: none;
+}
+.pa-splitter__gutter::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(128, 128, 128, 0.45);
+  border-radius: 2px;
+  transition: background-color 0.15s ease;
+}
+.pa-splitter__gutter:hover {
+  background-color: rgba(128, 128, 128, 0.18);
+}
+.pa-splitter__gutter:hover::before {
+  background-color: #007bff;
+}
+.pa-splitter__gutter:focus-visible {
+  box-shadow: inset 0 0 0 2px rgba(0, 123, 255, 0.4);
+}
+.pa-splitter__gutter:focus-visible::before {
+  background-color: #007bff;
+}
+
 /* ========================================
    Data Display Components
    Read-only label-value field pairs

package/package.json

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

package/snippets/splitter.html

@@ -0,0 +1,210 @@
+<!-- ================================
+     SPLITTER
+     Pure Admin Visual Framework
+
+     Resizable container with two or more panes. Drag a gutter to resize,
+     double-click to collapse / restore, arrow keys nudge size when the
+     gutter is focused.
+
+     CSS + structure here; drag, keyboard, persistence behaviour is wired up
+     by packages/core/src/js/splitter.js. The script auto-initializes on
+     [data-pa-splitter] at DOMContentLoaded.
+
+     Two markup flavours:
+       * 2-pane shorthand — uses --start / --end modifiers and root-level
+         min-start / max-start / default attributes (sections 1–3 below).
+       * N-pane (N ≥ 2) — generic panes with per-pane size / min / max
+         attributes (section 4 below). Use this when you have 3+ panes
+         or want more than one minimizable pane.
+
+     Orientation modifiers (match flexbox direction of the panes):
+       --horizontal   panes side-by-side, vertical gutter (default)
+       --vertical     panes stacked, horizontal gutter
+
+     The splitter takes whatever width/height its parent gives it — make
+     sure the parent has a sized cross axis (height for --horizontal,
+     width for --vertical) or the panes will collapse.
+     ================================ -->
+
+
+<!-- ================================
+     HORIZONTAL SPLIT
+     Side-by-side panes; vertical gutter. Start pane has a 200px floor
+     and 60% ceiling, defaults to 280px, persists under "demo-sidebar".
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--horizontal"
+     data-pa-splitter
+     data-pa-splitter-id="demo-sidebar"
+     data-pa-splitter-min-start="200px"
+     data-pa-splitter-max-start="60%"
+     data-pa-splitter-default="280px"
+     style="height: 400px;">
+    <div class="pa-splitter__pane pa-splitter__pane--start">
+        <!-- Your sidebar / list / nav content -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane pa-splitter__pane--end">
+        <!-- Your main / detail content -->
+    </div>
+</div>
+
+
+<!-- ================================
+     VERTICAL SPLIT
+     Stacked panes; horizontal gutter. Useful for editor + console / log
+     pane patterns.
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--vertical"
+     data-pa-splitter
+     data-pa-splitter-id="demo-console"
+     data-pa-splitter-min-start="80px"
+     data-pa-splitter-max-start="80%"
+     data-pa-splitter-default="60%"
+     style="height: 400px;">
+    <div class="pa-splitter__pane pa-splitter__pane--start">
+        <!-- Editor / primary content -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="horizontal"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane pa-splitter__pane--end">
+        <!-- Console / log / secondary -->
+    </div>
+</div>
+
+
+<!-- ================================
+     SPACED CARDS
+     Set `gap` on the splitter root to put breathing room between the
+     panes and the gutter — the JS subtracts it from the available
+     space so percent constraints still resolve correctly. Override
+     gutter thickness via the --pa-splitter-gutter-size custom property.
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--horizontal"
+     data-pa-splitter
+     style="height: 280px; gap: 1.6rem; --pa-splitter-gutter-size: 1rem;">
+    <div class="pa-splitter__pane pa-splitter__pane--start" style="padding: 0;">
+        <div class="pa-card" style="height: 100%; margin: 0;">…</div>
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane pa-splitter__pane--end" style="padding: 0;">
+        <div class="pa-card" style="height: 100%; margin: 0;">…</div>
+    </div>
+</div>
+
+
+<!-- ================================
+     N-PANE LAYOUT (3 panes — sidebar + content + inspector)
+     Per-pane attributes replace the root-level --start ones. Only the
+     first and last panes honour the minimize marker. Panes without a
+     data-pa-splitter-size share the leftover equally.
+     ================================ -->
+
+<div class="pa-splitter pa-splitter--horizontal"
+     data-pa-splitter
+     data-pa-splitter-id="demo-three-pane"
+     style="height: 400px;">
+    <div class="pa-splitter__pane"
+         data-pa-splitter-size="240px"
+         data-pa-splitter-min="180px"
+         data-pa-splitter-max="360px"
+         data-pa-splitter-minimize>
+        <!-- File tree / nav (minimizable to a left rail) -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane"
+         data-pa-splitter-min="240px">
+        <!-- Editor / main content (fills the rest) -->
+    </div>
+    <div class="pa-splitter__gutter"
+         role="separator"
+         aria-orientation="vertical"
+         tabindex="0"></div>
+    <div class="pa-splitter__pane"
+         data-pa-splitter-size="280px"
+         data-pa-splitter-min="220px"
+         data-pa-splitter-max="420px"
+         data-pa-splitter-minimize>
+        <!-- Inspector / detail (minimizable to a right rail) -->
+    </div>
+</div>
+
+
+<!-- ================================
+     DATA ATTRIBUTES — root (both modes)
+       data-pa-splitter                     marker; required
+       data-pa-splitter-id                  enables localStorage persistence
+                                            under "pa-splitter:<id>"
+       data-pa-splitter-step                keyboard step in px (default: 10)
+       data-pa-splitter-rail-size           rail width in px (default: 40)
+       data-pa-splitter-minimize-threshold  drag-to-rail snap ratio (default: 0.40)
+
+     DATA ATTRIBUTES — root (legacy 2-pane only)
+       data-pa-splitter-min-start   "200px" or "20%" (default: 0)
+       data-pa-splitter-max-start   "60%" or "800px" (default: available)
+       data-pa-splitter-default     initial size when no saved state
+       data-pa-splitter-minimize    "start" or "end" — opt into rail collapse
+
+     DATA ATTRIBUTES — per pane (N-pane only)
+       data-pa-splitter-size        "240px" or "30%" (default: shared leftover)
+       data-pa-splitter-min         "150px" or "10%" (default: 0)
+       data-pa-splitter-max         "400px" or "50%" (default: available)
+       data-pa-splitter-minimize    marker — only honoured on the first
+                                    and last panes
+
+     CHILD ATTRIBUTES (both modes)
+       data-pa-splitter-toggle      put on any element inside the splitter
+                                    (typically a button in the card header)
+                                    to trigger collapse / restore on click.
+                                    In N-pane mode, toggles the enclosing
+                                    pane (if it's minimizable).
+
+     RAIL-TITLE HOOK (non-card content)
+       Any element marked with `[data-pa-splitter-rail-title]` inside a
+       minimized pane rotates to vertical writing (sideways-rl). Use this
+       when you put plain content (not a `.pa-card`) in a minimizable pane:
+
+         <div class="pa-splitter__pane" data-pa-splitter-minimize>
+           <div data-pa-splitter-rail-title>📁 Files</div>
+           <!-- The rest of your pane content here -->
+         </div>
+
+       Cards adapt automatically — `_cards.scss` rotates the card header
+       inside any `.pa-splitter__pane--minimized` without needing the
+       attribute. No markup change needed for the card snippets above.
+
+     CSS CUSTOMIZATION
+       --pa-splitter-gutter-size    gutter thickness (default: 6px)
+       --pa-splitter-rail-size      rail width when a pane is minimized
+                                    (default: 40px / $splitter-rail-size).
+                                    JS picks this up via getComputedStyle, so
+                                    setting it on `:root` or per-instance via
+                                    inline style overrides the rail width
+                                    without also setting the data-attr.
+       gap                          space between panes and gutter
+                                    (native flexbox property)
+
+     MODIFIER CLASSES
+       pa-splitter--minimize-mirror flip the minimized title 180°
+                                    (transform: scale(-1,-1) on the heading
+                                     inside any `[data-pa-splitter-rail-title]`
+                                     or `.pa-card__header`)
+
+     JAVASCRIPT API (window.PaSplitter)
+       PaSplitter.init(el)          initialize a single element (idempotent)
+       PaSplitter.initAll(root?)    initialize all uninitialized splitters
+                                    under root (default: document)
+     ================================ -->

package/src/scss/_core.scss

@@ -111,6 +111,9 @@
 // Settings Panel
 @use 'core-components/settings-panel' as *;
 
+// Splitter (resizable two-pane container)
+@use 'core-components/splitter' as *;
+
 // Data Display (read-only fields)
 @use 'core-components/data-display' as *;
 

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

@@ -44,6 +44,21 @@
     }
   }
 
+  // Chromeless action button — no fill, no border, just the label / icon.
+  // Used for inline affordances inside dense surfaces (card-header actions,
+  // notification dismiss, toast close, splitter minimize) where a full button
+  // would compete with the content.
+  &--ghost {
+    background-color: transparent;
+    border-color: transparent;
+    color: var(--pa-text-secondary);
+
+    &:hover {
+      background-color: var(--pa-surface-hover);
+      color: var(--pa-text-color-1);
+    }
+  }
+
   &--xs {
     height: $btn-height-xs;
     padding: $btn-padding-xs-v $btn-padding-xs-h;

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

@@ -100,6 +100,24 @@
       flex-shrink: 0;
     }
 
+    // …unless it's the progressive-overflow variant, which intentionally
+    // shrinks below content so the JS can read `scrollWidth > clientWidth`
+    // as the "needs overflow" signal. Nested under `&__header` so the
+    // selector matches `.pa-card__header .pa-card__actions--overflow` —
+    // the same specificity as the rule above, but later in source order
+    // and explicit on the modifier.
+    .pa-card__actions--overflow {
+      flex-shrink: 1;
+    }
+
+    // When the actions wrapper can shrink (overflow variant), give the title
+    // a floor so it can't be squeezed to 0 — icon + a few chars + ellipsis
+    // stay visible no matter how narrow. `:has()` scopes the override so
+    // ordinary cards keep `min-width: 0` and their full ellipsis range.
+    &:has(> .pa-card__actions--overflow) > .pa-card__title {
+      min-width: 6rem;
+    }
+
     // Buttons in card headers - negative margin to prevent header height growth
     .pa-btn {
       margin-top: -0.25rem;
@@ -237,6 +255,61 @@
     display: flex;
     gap: $spacing-sm;
     align-items: center;
+
+    // Responsive actions — render both the spread button list AND a
+    // collapsed split-button form; a container query on the header swaps
+    // which is visible. Stays CSS-only (no ResizeObserver / layout reads)
+    // but the markup carries both forms.
+    //
+    //   <div class="pa-card__header">
+    //     <div class="pa-card__title">…</div>
+    //     <div class="pa-card__actions pa-card__actions--responsive">
+    //       <div class="pa-card__actions-full">
+    //         …spread buttons…
+    //       </div>
+    //       <div class="pa-card__actions-collapsed">
+    //         <div class="pa-btn-split">…same actions as a menu…</div>
+    //       </div>
+    //     </div>
+    //   </div>
+    //
+    // Container is the header; threshold is $card-actions-collapse-at.
+    // Wired up via :has() (Baseline 2023) so authors don't need a second
+    // modifier on the header.
+    &--responsive {
+      > .pa-card__actions-full {
+        display: flex;
+        gap: $spacing-sm;
+        align-items: center;
+      }
+      > .pa-card__actions-collapsed {
+        display: none;
+      }
+    }
+
+    // Progressive overflow variant — driven by card-actions-overflow.js.
+    // `min-width: 0` lets flex shrink the wrapper below its content; with
+    // `overflow: hidden` the wrapper clips its children when narrow, which
+    // is what makes `scrollWidth > clientWidth` a reliable overflow signal
+    // for the JS. Buttons themselves get `flex-shrink: 0` so they don't
+    // squeeze to fit — they either fit fully or get moved to the menu.
+    &--overflow {
+      min-width: 0;
+      overflow: hidden;
+
+      > * {
+        flex-shrink: 0;
+      }
+    }
+  }
+
+  // Enable the container query on any header that contains a responsive
+  // actions wrapper. Container query rule itself is emitted at the bottom
+  // of this file (outside the .pa-card block) since `@container` can't
+  // hide inside an arbitrarily-nested selector cleanly.
+  &__header:has(> .pa-card__actions--responsive) {
+    container-type: inline-size;
+    container-name: pa-card-header;
   }
 
   &__meta {
@@ -499,3 +572,79 @@ a.pa-card {
   border-bottom: $border-width-medium solid var(--pa-accent);
   padding-bottom: $spacing-sm;
 }
+
+// Responsive card actions — container query for the spread/collapsed swap.
+// Container context set by `.pa-card__header:has(> .pa-card__actions--responsive)`
+// above. Threshold needs explicit interpolation in `@container` (the Sass
+// auto-interpolation that works in `@media` doesn't apply here).
+@container pa-card-header (max-width: #{$card-actions-collapse-at}) {
+  .pa-card__actions--responsive {
+    > .pa-card__actions-full {
+      display: none;
+    }
+    > .pa-card__actions-collapsed {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+
+// Card adaptation inside a minimized splitter pane.
+// Lives here (not in `_splitter.scss`) so the splitter stays unaware of card
+// internals — the rotation hook on the splitter side is `[data-pa-splitter-rail-title]`
+// and this rule applies that attribute's contract to the card header.
+//
+// Layout: pa-card already has `height: 100%` etc., we just hide body/footer,
+// promote the header to fill the rail, and pin the title to the top.
+.pa-splitter__pane--minimized > .pa-card {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+
+  > .pa-card__body,
+  > .pa-card__footer {
+    display: none;
+  }
+
+  > .pa-card__header {
+    flex: 1 1 auto;
+    // Pin title to the rail's top (inline-start in sideways-rl writing mode).
+    justify-content: flex-start;
+    writing-mode: sideways-rl;
+
+    // Icons reset to natural orientation (descendant combinator covers both
+    // flat markup and the BEM `pa-card__title > i` nesting).
+    i,
+    svg {
+      writing-mode: initial;
+    }
+
+    // Vertically align the icon between expanded and minimized states.
+    // In expanded mode, `align-items: center` centers the title vertically
+    // (icon center at header-min-height / 2 from top). In minimized mode,
+    // `justify-content: flex-start` pins the title to the rail's top edge.
+    // Push the title down by the difference so the icon sits at the same
+    // visual y-position in both states — no "jump" when toggling.
+    .pa-card__title {
+      padding-top: calc((#{$card-header-min-height} - #{$font-size-base}) / 2 - #{$card-header-padding-v});
+    }
+
+    // Hide interactive controls inside the header — they'd be sideways and
+    // unreadable. The list here is intentional: cards know their own header
+    // contents better than the splitter ever could.
+    .pa-btn,
+    .pa-btn-group,
+    button,
+    input {
+      display: none;
+    }
+  }
+}
+
+// Mirror modifier — when the splitter root carries `pa-splitter--minimize-mirror`,
+// the card heading flips 180° (matches the generic mirror behaviour, scoped
+// to the card title heading).
+.pa-splitter--minimize-mirror .pa-splitter__pane--minimized > .pa-card > .pa-card__header :is(h1, h2, h3, h4, h5, h6) {
+  transform: scale(-1, -1);
+}

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/_components.scss

@@ -187,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
 // ============================================================================
@@ -772,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